首頁 > 開發者 > JavaScript

Javascript驗證上傳圖片大小

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

需求分析：

      在做上傳圖片的時候，如果不限制上傳圖片大小，後果非常的嚴重。那麼我們怎樣才可以解決一個棘手的問題呢？有兩種方式：

     1)幕後處理： 也就是AJAX POST提交到後台，把圖片上傳到伺服器上，然後獲得該圖片大小做處理。

     2)前台處理： 也就是利用Javascript擷取該圖片大小。

顯然第一種方式，很不好。因為需要把檔案先上傳到伺服器上，如果檔案很大的話，在加上網不是很快，需要等待好長時間，治標不治本。

 

功能解析：

     在這裡我只介紹IE與FireFox兩個瀏覽器的不同做法。

     IE6：

     關鍵字： fileSize    onreadystatechange    complete

         在IE6中可以通過Img對象的fileSize

屬性獲得檔案大小，但這個fileSize屬性的正確值是建立在onreadystatechange

事件的complete

中，也就是

       <img src="" class="img"<br />onreadystatechange="Javascript:sizeCheck(this);"><br />function sizeCheck(img) {</p><p> if(img.readyState == "complete") {<br /> alert(img.fileSize);<br /> }<br />} 

 

    FireFox3.0：

    關鍵字： getAsDataURL()    fileSize

          在FireFox中處於安全的考慮，無法獲得上傳圖片的完整路徑，只能獲得圖片名稱。但瀏覽器提供nsIDOMFile這樣一個介面，所以需要通過getAsDataURL()獲得處理過後的路徑，但該路徑不影響圖片src顯示。

       nsIDOMFile介面：

  • DOMString getAsBinary();
  • DOMString getAsDataURL();
  • DOMString getAsText(in DOMString encoding);

     <input type="file" name="uploadImg"<br />onchange="Javascript:checkFileChange(this);"<br />size="12"/><br />function checkFileChange(obj) {<br /> var img = document.getElementById("img");<br /> img.src = obj.files[0].getAsDataUrl();<br /> alert(obj.files[0].fileSize);<br />}

 

以上是兩個不同瀏覽器的處理方式,那麼怎麼把他們融和到一起呢？我在下面會將我做的小例子貼出來，其中裡面我使用JQuery，方便與擷取對象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"><br /><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <script type="text/javascript" src="lib/jquery-1.3.2.min.js" ></script><br /> <title>檢查上傳圖片大小</title><br /> <style type="text/css"><br /> .img {width:136px;height:102px;}<br /> .imgError{border:3px solid red;}<br /> </style><br /> <script type="text/javascript"><br /> //限制上傳圖片大小100K<br /> var MAXSIZE = 100 * 1024;</p><p> //圖片大小限制資訊<br /> var ERROR_IMGSIZE = "圖片大小不能超過100K";<br /> //預設圖片<br /> var NOPHOTO = "imgs/nophoto.gif";</p><p> //圖片是否合格<br /> var isImg = true;<br /> /**<br /> * Input file onchange事件<br /> * @params obj file對象<br /> * @return void<br /> **/<br /> function checkFileChange(obj) {</p><p> //初始化設定<br /> $(".imgTable").removeClass("imgError");<br /> updateTips("");<br /> var img = $(".img").get(0);<br /> var file = obj.value;<br /> var exp = /./.jpg|./.gif|./.png|./.bmp/i;<br /> if (exp.test(file)) {//驗證格式<br /> if($.browser.msie) {//判斷是否是IE<br /> img.src = file;<br /> } else {<br /> img.src = obj.files[0].getAsDataURL();<br /> sizeCheck(img);<br /> }</p><p> } else {<br /> img.src = NOPHOTO;<br /> $(".imgTable").addClass("imgError");<br /> updateTips("圖片格式不正確");<br /> isImg = false;<br /> }</p><p> }<br /> /**<br /> * sizeCheck 檢查圖片大小<br /> * @params img 圖片對象<br /> * @return void<br /> **/<br /> function sizeCheck(img) {<br /> //初始化設定<br /> $(".imgTable").removeClass("imgError");<br /> updateTips("");<br /> if ($.browser.msie) {//查看是否是IE<br /> if(img.readyState == "complete") {<br /> if (img.fileSize > MAXSIZE) {<br /> $(".imgTable").addClass("imgError");<br /> updateTips(ERROR_IMGSIZE);<br /> isImg = false;<br /> }else {<br /> isImg = true;<br /> }</p><p> }else {<br /> $(".imgTable").addClass("imgError");<br /> updateTips(ERROR_IMGSIZE);<br /> isImg = false;<br /> } </p><p> } else {<br /> var file = $("input:file[name='uploadImg']")[0];</p><p> if (file.files[0].fileSize > MAXSIZE) {<br /> $(".imgTable").addClass("imgError");<br /> updateTips(ERROR_IMGSIZE);<br /> isImg = false;<br /> }else {<br /> isImg = true;<br /> } </p><p> }<br /> }</p><p> /**<br /> * updateTips 註冊錯誤資訊顯示<br /> * @params str 顯示內容<br /> * @return void<br /> **/<br /> function updateTips(str) {<br /> $("p#errorTips").text(str);<br /> }<br /> /**<br /> * commit 註冊提交<br /> * @return void<br /> **/<br /> function commit() {</p><p> var isCommit = true;<br /> var usrname = $("input:text[name='usrname']"),<br /> email = $("input:text[name='email']"),<br /> img = $(".img"),<br /> file = $("input:file[name='uploadImg']"),<br /> frm = document.frm;</p><p> isCommit = isCommit && isImg;</p><p> if(isCommit) {<br /> frm.action = "about:blank";<br /> frm.submit();<br /> }<br /> }<br /> /**<br /> * errorImg 圖片錯誤顯示<br /> * @params img 圖片對象<br /> * @return void<br /> **/<br /> function errorImg(img) {<br /> img.src = NOPHOTO;<br /> }</p><p> </script><br /></head><br /><body><br /><form name="frm" method="post"><br /><p id="errorTips"> </p><br /><table cellpadding="1" cellspacing="0" width="350px" border="1"><br /><tr><br /> <td><label>姓名：</label></td><br /> <td><input type="text" name="usrname" maxlength="50"/></td><br /></tr><br /><tr><br /> <td><label>性別：</label></td><br /> <td><input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="0"/>女</td><br /></tr><br /><tr><br /> <td><label>郵件：</label></td><br /> <td><input type="text" name="email" maxlength="100"/></td><br /></tr><br /><tr><br /> <td><lable>映像</label></td><br /> <td><br /> <table cellpadding="0" cellspacing="0" class="imgTable"><br /> <tr><br /> <td><img src="imgs/nophoto.gif" mce_src="imgs/nophoto.gif" class="img" alt="頭像" onerror="Javascript:errorImg(this);"<br /> onreadystatechange="Javascript:sizeCheck(this);"/><br /> </td><br /> </tr><br /> <tr><br /> <td><input type="file" name="uploadImg" onchange="Javascript:checkFileChange(this);"<br /> size="12"/></td><br /> </tr><br /> </table><br /> </td><br /></tr><br /><tr><br /> <td colspan="2"><a href="Javascript:commit();" mce_href="Javascript:commit();">註冊</a></td><br /></tr><br /></table><br /></form><br /></body><br /></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More