js验证上传图片的方法

本文实例讲述了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="
请选择一个文件"; } else {this.FileExt=obj.value.substr（obj.value.lastIndexOf（"."））.toLowerCase（）; if（this.AllowExt！=0&&this.AllowExt.indexOf（this.FileExt）==-1）//判断文件类型是否允许上传 { this.ErrMsg="
该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件，当前文件类型为"+this.FileExt;} }if（this.ErrMsg！=""）{this.ShowMsg（this.ErrMsg,false）; return false; } elsereturn 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+"
图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件，当前图片宽度为"+this.ImgWidth+"px"; if（this.AllowImgHeight！=0&&this.AllowImgHeight<this.ImgHeight） this.ErrMsg=this.ErrMsg+"
图片高度超过限制。请上传高度小于"+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+"
文件大小超过限制。请上传小于"+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（"
","<li>"）;msg=msg.replace（/
/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+="
"+（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程序设计有所帮助。