Javascript验证上传图片大小[前台处理]
生活随笔
收集整理的這篇文章主要介紹了
Javascript验证上传图片大小[前台处理]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
需求分析：
在做上傳圖片的時候，如果不限制上傳圖片大小，后果非常的嚴重。那么我們怎樣才可以解決一個棘手的問題呢？有兩種方式：
1)后臺處理： 也就是AJAX POST提交到后臺，把圖片上傳到服務器上，然后獲得該圖片大小做處理。
2)前臺處理： 也就是利用Javascript獲取該圖片大小。
顯然第一種方式，很不好。因為需要把文件先上傳到服務器上，如果文件很大的話，在加上網不是很快，需要等待好長時間，治標不治本。
功能解析：
在這里我只介紹IE與FireFox兩個瀏覽器的不同做法。
IE6：
關鍵字： fileSize onreadystatechange complete
在IE6中可以通過Img對象的fileSize 屬性獲得文件大小，但這個fileSize屬性的正確值是建立在onreadystatechange 事件的complete 中，也就是
FireFox3.0：
關鍵字： getAsDataURL() fileSize
在FireFox中處于安全的考慮，無法獲得上傳圖片的完整路徑，只能獲得圖片名稱。但瀏覽器提供nsIDOMFile這樣一個接口，所以需要通過getAsDataURL()獲得處理過后的路徑，但該路徑不影響圖片src顯示。
nsIDOMFile接口：
以上是兩個不同瀏覽器的處理方式,那么怎么把他們融和到一起呢？我在下面會將我做的小例子貼出來，其中里面我使用JQuery，方便與獲取對象
<!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"?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;}.imgError{border:3px?solid?red;}</style><script?type="text/javascript">//限制上傳圖片大小100Kvar?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)?{?//初始化設置?$(".imgTable").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.files[0].getAsDataURL();sizeCheck(img);}?}?else?{img.src?=?NOPHOTO;$(".imgTable").addClass("imgError");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");?updateTips(ERROR_IMGSIZE);?isImg?=?false;?}else?{isImg?=?true;}?}else?{?$(".imgTable").addClass("imgError");updateTips(ERROR_IMGSIZE);?isImg?=?false;}}?else?{var?file?=?$("input:file[name='uploadImg']")[0];if?(file.files[0].size?>?MAXSIZE)?{$(".imgTable").addClass("imgError");?updateTips(ERROR_IMGSIZE);isImg?=?false;?}else?{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: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?圖片錯誤顯示?*?@params?img?圖片對象?*?@return?void?**/function?errorImg(img)?{?img.src?=?NOPHOTO;}?</script>?</head><body>?<form?name="frm"?method="post"><p?id="errorTips">?</p>?<table?cellpadding="1"?cellspacing="0"?width="350px"?border="1"><tr><td><label>姓名：</label></td>?<td><input?type="text"?name="usrname"?maxlength="50"/></td>?</tr><tr>?<td><label>性別：</label></td><td><input?type="radio"?name="sex"?value="0"/>男<input?type="radio"?name="sex"?value="0"/>女</td></tr><tr><td><label>郵件：</label></td><td><input?type="text"?name="email"?maxlength="100"/></td>?</tr><tr>?<td><lable>圖像</label></td>?<td>?<table?cellpadding="0"?cellspacing="0"?class="imgTable"><tr><td><img?src="imgs/nophoto.gif"?src="imgs/nophoto.gif"?class="img"?alt="頭像"?onerror="Javascript:errorImg(this);"onreadystatechange="Javascript:sizeCheck(this);"/>?</td></tr><tr>?<td><input?type="file"?name="uploadImg"?onchange="Javascript:checkFileChange(this);"size="12"/></td>?</tr>?</table><table><tr>?<td?colspan="2"><a?href="Javascript:commit();"rel="external?nofollow"?rel="external?nofollow"href="Javascript:commit();"rel="external?nofollow"?rel="external?nofollow"?>注冊</a></td></tr>?</table></form>?</body></html>轉載于:https://my.oschina.net/fuckBAT/blog/423734
總結
以上是生活随笔為你收集整理的Javascript验证上传图片大小[前台处理]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux下cat命令详解
- 下一篇： Java知多少（105）套接字(Sock