Javascript验证上传图片大小[前台处理]
需求分析:
在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:
1)后台处理:也就是AJAXPOST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。
2)前台处理:也就是利用Javascript获取该图片大小。
显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。
功能解析:
在这里我只介绍IE与FireFox两个浏览器的不同做法。
IE6:
关键字:fileSizeonreadystatechangecomplete
在IE6中可以通过Img对象的fileSize属性获得文件大小,但这个fileSize属性的正确值是建立在onreadystatechange事件的complete中,也就是
<imgsrc=""class="img" onreadystatechange="Javascript:sizeCheck(this);"> functionsizeCheck(img){ if(img.readyState=="complete"){ alert(img.fileSize); } }
FireFox3.0:
关键字:getAsDataURL()fileSize
在FireFox中处于安全的考虑,无法获得上传图片的完整路径,只能获得图片名称。但浏览器提供nsIDOMFile這樣一個接口,所以需要通过getAsDataURL()获得处理过后的路径,但该路径不影响图片src显示。
nsIDOMFile接口:
DOMStringgetAsBinary(); DOMStringgetAsDataURL(); DOMStringgetAsText(inDOMStringencoding); <inputtype="file"name="uploadImg" onchange="Javascript:checkFileChange(this);" size="12"/> functioncheckFileChange(obj){ varimg=document.getElementById("img"); img.src=obj.files[0].getAsDataUrl(); alert(obj.files[0].fileSize); }
以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢?我在下面会将我做的小例子贴出来,其中里面我使用JQuery,方便与获取对象
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh"dir="ltr"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <scripttype="text/javascript"src="lib/jquery-1.3.2.min.js"></script> <title>检查上传图片大小</title> <styletype="text/css"> .img{width:136px;height:102px;} .imgError{border:3pxsolidred;} </style> <scripttype="text/javascript"> //限制上传图片大小100K varMAXSIZE=100*1024; //图片大小限制信息 varERROR_IMGSIZE="图片大小不能超过100K"; //默认图片 varNOPHOTO="imgs/nophoto.gif"; //图片是否合格 varisImg=true; /** *Inputfileonchange事件 *@paramsobjfile对象 *@returnvoid **/ functioncheckFileChange(obj){ //初始化设置 $(".imgTable").removeClass("imgError"); updateTips(""); varimg=$(".img").get(0); varfile=obj.value; varexp=/.\.jpg|.\.gif|.\.png|.\.bmp/i; if(exp.test(file)){//验证格式 if($.browser.msie){//判断是否是IE img.src=file; }else{ img.src=obj.files[0].getAsDataURL(); sizeCheck(img); } }else{ img.src=NOPHOTO; $(".imgTable").addClass("imgError"); updateTips("图片格式不正确"); isImg=false; } } /** *sizeCheck检查图片大小 *@paramsimg图片对象 *@returnvoid **/ functionsizeCheck(img){ //初始化设置 $(".imgTable").removeClass("imgError"); updateTips(""); if($.browser.msie){//查看是否是IE if(img.readyState=="complete"){ if(img.fileSize>MAXSIZE){ $(".imgTable").addClass("imgError"); updateTips(ERROR_IMGSIZE); isImg=false; }else{ isImg=true; } }else{ $(".imgTable").addClass("imgError"); updateTips(ERROR_IMGSIZE); isImg=false; } }else{ varfile=$("input:file[name='uploadImg']")[0]; if(file.files[0].fileSize>MAXSIZE){ $(".imgTable").addClass("imgError"); updateTips(ERROR_IMGSIZE); isImg=false; }else{ isImg=true; } } } /** *updateTips注册错误信息显示 *@paramsstr显示内容 *@returnvoid **/ functionupdateTips(str){ $("p#errorTips").text(str); } /** *commit注册提交 *@returnvoid **/ functioncommit(){ varisCommit=true; varusrname=$("input:text[name='usrname']"), email=$("input:text[name='email']"), img=$(".img"), file=$("input:file[name='uploadImg']"), frm=document.frm; isCommit=isCommit&&isImg; if(isCommit){ frm.action="about:blank"; frm.submit(); } } /** *errorImg图片错误显示 *@paramsimg图片对象 *@returnvoid **/ functionerrorImg(img){ img.src=NOPHOTO; } </script> </head> <body> <formname="frm"method="post"> <pid="errorTips"></p> <tablecellpadding="1"cellspacing="0"width="350px"border="1"> <tr> <td><label>姓名:</label></td> <td><inputtype="text"name="usrname"maxlength="50"/></td> </tr> <tr> <td><label>性别:</label></td> <td><inputtype="radio"name="sex"value="0"/>男<inputtype="radio"name="sex"value="0"/>女</td> </tr> <tr> <td><label>邮件:</label></td> <td><inputtype="text"name="email"maxlength="100"/></td> </tr> <tr> <td><lable>图像</label></td> <td> <tablecellpadding="0"cellspacing="0"class="imgTable"> <tr> <td><imgsrc="imgs/nophoto.gif"src="imgs/nophoto.gif"class="img"alt="头像"onerror="Javascript:errorImg(this);" onreadystatechange="Javascript:sizeCheck(this);"/> </td> </tr> <tr> <td><inputtype="file"name="uploadImg"onchange="Javascript:checkFileChange(this);" size="12"/></td> </tr> </table> </td> </tr> <tr> <tdcolspan="2"><ahref="Javascript:commit();"rel="externalnofollow"rel="externalnofollow"href="Javascript:commit();"rel="externalnofollow"rel="externalnofollow">注册</a></td> </tr> </table> </form> </body> </html>