Javascript验证上传图片大小[前台处理]_

1、Javascript验证上传图片大小前台处理_ 在做上传图片的时候，假如不限制上传图片大小，后果特别的严峻。解决这个问题有两种方式：后台处理、前台处理。 需求分析： 在做上传图片的时候，假如不限制上传图片大小，后果特别的严峻。那么我们怎样才可以解决一个麻烦的问题呢？有两种方式： 1)后台处理： 也就是AJAX POST提交到后台，把图片上传到服务器上，然后获得该图片大小做处理。 2)前台处理： 也就是利用Javascript猎取该图片大小。 明显第一种方式，很不好。由于需要把文件先上传到服务器上，假如文件很大的话，在加上网不是很快，需要等待好长时间，治标不治本。 功能解析： 在这里我只介绍IE

2、与FireFox两个扫瞄器的不同做法。 IE6： 关键字： fileSize onreadystatechange complete 在IE6中可以通过Img对象的fileSize 属性获得文件大小，但这个fileSize属性的正确值是建立在onreadystatechange 大事的complete 中，也就是 img src= class=img onreadystatechange=Javascript:sizeCheck(this); function sizeCheck(img) if(img.readyState = complete) alert(img.fileSize); F

3、ireFox3.0： 关键字： getAsDataURL() fileSize 在FireFox中处于平安的考虑，无法获得上传图片的完整路径，只能获得图片名称。但扫瞄器供应nsIDOMFile這樣一個接口，所以需要通过getAsDataURL()获得处理过后的路径，但该路径不影响图片src显示。 nsIDOMFile接口： DOMString getAsBinary(); DOMString getAsDataURL(); DOMString getAsText(in DOMString encoding); input type=file name=uploadImg onchange=Ja

4、vascript:checkFileChange(this); size=12/ function checkFileChange(obj) var img = document.getElementById(img); img.src = obj.files0.getAsDataUrl(); alert(obj.files0.fileSize); 以上是两个不同扫瞄器的处理方式,那么怎么把他们融和到一起呢？我在下面会将我做的小例子贴出来，其中里面我用法JQuery，便利与猎取对象 !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN

5、 l1/DTD/xhtml1-transitional.dtd html xmlns=l xml:lang=zh lang=zh dir=ltr head meta http-equiv=Content-Type content=text/html; charset=utf-8 / script type=text/javascript src=lib/jquery-1.3.2.min.js /script title检查上传图片大小/title style type=text/css .img width:136px;height:102px; .imgErrorborder:3px sol

6、id red; /style script type=text/javascript /限制上传图片大小100K var MAXSIZE = 100 * 1024; /图片大小限制信息 var ERROR_IMGSIZE = 图片大小不能超过100K; /默认图片 var NOPHOTO = imgs/nophoto.gif; /图片是否合格 var isImg = true; /* * Input file onchange大事 * params obj file对象 * return void */ function checkFileChange(obj) /初始化设置 $(.imgTa

7、ble).removeClass(imgError); updateTips(); var img = $(.img).get(0); var file = obj.value; var exp = /.jpg|.gif|.png|.bmp/i; if (exp.test(file) /验证格式 if($.browser.msie) /推断是否是IE img.src = file; else img.src = obj.files0.getAsDataURL(); sizeCheck(img); else img.src = NOPHOTO; $(.imgTable).addClass(img

8、Error); updateTips(图片格式不正确); isImg = false; /* * sizeCheck 检查图片大小 * params img 图片对象 * return void */ function sizeCheck(img) /初始化设置 $(.imgTable).removeClass(imgError); updateTips(); if ($.browser.msie) /查看是否是IE if(img.readyState = complete) if (img.fileSize MAXSIZE) $(.imgTable).addClass(imgError);

9、updateTips(ERROR_IMGSIZE); isImg = false; else isImg = true; else $(.imgTable).addClass(imgError); updateTips(ERROR_IMGSIZE); isImg = false; else var file = $(input:filename=uploadImg)0; if (file.files0.fileSize MAXSIZE) $(.imgTable).addClass(imgError); updateTips(ERROR_IMGSIZE); isImg = false; else

10、 isImg = true; /* * updateTips 注册错误信息显示 * params str 显示内容 * return void */ function updateTips(str) $(p#errorTips).text(str); /* * commit 注册提交 * return void */ function commit() var isCommit = true; var usrname = $(input:textname=usrname), email = $(input:textname=email), img = $(.img), file = $(inp

11、ut:filename=uploadImg), frm = document.frm; isCommit = isCommit isImg; if(isCommit) frm.action = about:blank; frm.submit(); /* * errorImg 图片错误显示 * params img 图片对象 * return void */ function errorImg(img) img.src = NOPHOTO; /script /head body form name=frm method=post p id=errorTips /p table cellpaddi

12、ng=1 cellspacing=0 width=350px border=1 tr tdlabel姓名：/label/td tdinput type=text name=usrname maxlength=50/td /tr tr tdlabel性别：/label/td tdinput type=radio name=sex value=0/男input type=radio name=sex value=0/女/td /tr tr tdlabel邮件：/label/td tdinput type=text name=email maxlength=100/td /tr tr tdlable

13、图像/label/td td table cellpadding=0 cellspacing=0 class=imgTable tr tdimg src=imgs/nophoto.gif src=imgs/nophoto.gif class=img alt=头像 onerror=Javascript:errorImg(this); onreadystatechange=Javascript:sizeCheck(this);/ /td /tr tr tdinput type=file name=uploadImg onchange=Javascript:checkFileChange(this); size=12/td /tr /table /td /tr tr