Javascript驗(yàn)證上傳圖片大小[前臺(tái)處理]_

1、Javascript驗(yàn)證上傳圖片大小前臺(tái)處理_ 在做上傳圖片的時(shí)候，假如不限制上傳圖片大小，后果特別的嚴(yán)峻。解決這個(gè)問題有兩種方式：后臺(tái)處理、前臺(tái)處理。 需求分析： 在做上傳圖片的時(shí)候，假如不限制上傳圖片大小，后果特別的嚴(yán)峻。那么我們?cè)鯓硬趴梢越鉀Q一個(gè)麻煩的問題呢？有兩種方式： 1)后臺(tái)處理： 也就是AJAX POST提交到后臺(tái)，把圖片上傳到服務(wù)器上，然后獲得該圖片大小做處理。 2)前臺(tái)處理： 也就是利用Javascript獵取該圖片大小。 明顯第一種方式，很不好。由于需要把文件先上傳到服務(wù)器上，假如文件很大的話，在加上網(wǎng)不是很快，需要等待好長(zhǎng)時(shí)間，治標(biāo)不治本。 功能解析： 在這里我只介紹IE

2、與FireFox兩個(gè)掃瞄器的不同做法。 IE6： 關(guān)鍵字： fileSize onreadystatechange complete 在IE6中可以通過(guò)Img對(duì)象的fileSize 屬性獲得文件大小，但這個(gè)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： 關(guān)鍵字： getAsDataURL() fileSize 在FireFox中處于平安的考慮，無(wú)法獲得上傳圖片的完整路徑，只能獲得圖片名稱。但掃瞄器供應(yīng)nsIDOMFile這樣一個(gè)接口，所以需要通過(guò)getAsDataURL()獲得處理過(guò)后的路徑，但該路徑不影響圖片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); 以上是兩個(gè)不同掃瞄器的處理方式,那么怎么把他們?nèi)诤偷揭黄鹉兀课以谙旅鏁?huì)將我做的小例子貼出來(lái)，其中里面我用法JQuery，便利與獵取對(duì)象 !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 = 圖片大小不能超過(guò)100K; /默認(rèn)圖片 var NOPHOTO = imgs/nophoto.gif; /圖片是否合格 var isImg = true; /* * Input file onchange大事 * params obj file對(duì)象 * return void */ function checkFileChange(obj) /初始化設(shè)置 $(.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) /驗(yàn)證格式 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 圖片對(duì)象 * return void */ function sizeCheck(img) /初始化設(shè)置 $(.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 注冊(cè)錯(cuò)誤信息顯示 * params str 顯示內(nèi)容 * return void */ function updateTips(str) $(p#errorTips).text(str); /* * commit 注冊(cè)提交 * 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 圖片錯(cuò)誤顯示 * params img 圖片對(duì)象 * 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