Heim > Artikel > Web-Frontend > js验证上传图片的方法_javascript技巧
js验证上传图片的方法_javascript技巧
- WBOYOriginal
- 2016-05-16 15:59:341128Durchsuche
本文实例讲述了js验证上传图片的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js验证图片</title>
<script>
UpLoadFileCheck=function()
{
this.AllowExt=".jpg,.gif";
//允许上传的文件类型 0为无限制
//每个扩展名后边要加一个"," 小写字母表示
this.AllowImgFileSize=0;
//允许上传文件的大小 0为无限制 单位：KB
this.AllowImgWidth=0;
//允许上传的图片的宽度 0为无限制 单位：px(像素)
this.AllowImgHeight=0;
//允许上传的图片的高度 0为无限制 单位：px(像素)
this.ImgObj=new Image();
this.ImgFileSize=0;
this.ImgWidth=0;
this.ImgHeight=0;
this.FileExt="";
this.ErrMsg="";
this.IsImg=false;//全局变量
}
UpLoadFileCheck.prototype.CheckExt=function(obj)
{
this.ErrMsg="";
this.ImgObj.src=obj.value;
//this.HasChecked=false;
if(obj.value=="")
{
this.ErrMsg="\n请选择一个文件";
}
else
{
this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1)
//判断文件类型是否允许上传
{
this.ErrMsg="\n该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件，当前文件类型为"+this.FileExt;
}
}
if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return this.CheckProperty(obj);
}
UpLoadFileCheck.prototype.CheckProperty=function(obj)
{
if(this.ImgObj.readyState!="complete")//
{
sleep(1000);//一秒使用图能完全加载
}
if(this.IsImg==true)
{
this.ImgWidth=this.ImgObj.width;
//取得图片的宽度
this.ImgHeight=this.ImgObj.height;
//取得图片的高度
if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth)
this.ErrMsg=this.ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件，当前图片宽度为"+this.ImgWidth+"px";
if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)
this.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件，当前图片高度为"+this.ImgHeight+"px";
}
this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;
//取得图片文件的大小
if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize)
this.ErrMsg=this.ErrMsg+"\n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件，当前文件大小为"+this.ImgFileSize+"KB";
if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return true;
}
UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)
//显示提示信息 tf=false 显示错误信息 msg-信息内容
{
/*msg=msg.replace("\n","<li>");
msg=msg.replace(/\n/gi,"<li>");
*/
alert(msg);
}
function sleep(num)
{
var tempDate=new Date();
var tempStr="";
var theXmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
while((new Date()-tempDate)<num )
{
tempStr+="\n"+(new Date()-tempDate);
try{
theXmlHttp .open( "get", "about:blank?JK="+Math.random(), false );
theXmlHttp .send();
}
catch(e){;}
}
//containerDiv.innerText=tempStr;
return;
}
function c(obj)
{
var d=new UpLoadFileCheck();
d.IsImg=true;
d.AllowImgFileSize=100;
d.CheckExt(obj)
}
</script>
</head>
<body>
<input name="" type="file" onchange="c(this)"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：javascript实现在网页任意处点左键弹出隐藏菜单的方法_javascript技巧Nächster Artikel：js获取微信版本号的方法_javascript技巧