js验证上传图片的方法
2015-05-12 15:33
961 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- js验证上传图片的方法
- 上传的js验证(图片/文件的扩展名)
- vue.js图片转Base64上传图片并预览的实现方法
- JS实现图片上传多次上传同一张不生效的处理方法
- js验证上传图片的尺寸
- js验证上传图片文件大小,类型等
- js兼容火狐显示上传图片预览效果的方法(读取字节)
- JS上传图片前实现图片预览效果的方法
- 文件上传js插件,附带图片预览与验证功能,未完待续,请大神不啬指正,指教。
- SWFUpload.js方法图片的上传和imgAreaselect.js方法图片任意部位的截取
- js实现头像图片切割缩放及无刷新上传图片的方法
- node.js中实现kindEditor图片上传功能的方法教程
- 多个上传文件用js验证文件的格式和大小的方法(推荐)
- js 验证上传图片大小及格式
- asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
- JS简单验证上传文件类型的方法
- 图片上传是否为空,以及类型的js验证
- JS验证上传图片格式和大小
- ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异