Javascriptはアップロード画像サイズを検証する[フロント処理]

8226 ワード

需要分析:
画像をアップロードする時、画像のサイズを制限しないと、大変な結果になります.じゃ、どうすれば難しい問題を解決できますか?バックグラウンド処理:つまりAJAX POSTをバックグラウンドに提出して、画像をサーバーにアップロードして、その画像のサイズを取って処理します.2)フロント処理:つまり、Javascriptを利用してこの画像のサイズを取得する.第一の方式は明らかによくないです.ファイルを先にサーバーにアップロードしなければならないので、ファイルが大きいなら、インターネットを使うのはそんなに速くないです.長い間待つ必要があります.
機能解析:
ここではIEとFireFoxの2つのブラウザの違いだけを紹介します.IE 6:キーワード:fileSize onreadystatechange compleeteは、IE 6において、ImgオブジェクトのfileSize属性を通じてファイルサイズを取得することができますが、このfileSize属性の正確な値は、onreadystatechangeイベントのcompletteeにおいて構築されたものです.
<img src="" class="img"
onreadystatechange="Javascript:sizeCheck(this);"> 
function sizeCheck(img) { 
    if(img.readyState == "complete") { 
    alert(img.fileSize); 
    } 
}
FireFox 3.0:キーワード:getAdata URL()fileSizeはFireFoxの中で安全に考慮されています.アップロードされた画像の完全なパスが得られなくて、画像名しか獲得できません.ただし、ブラウザはnsIDOMFileというインターフェースを提供しているので、getsAdata URL()を通じて処理後のパスを取得する必要がありますが、このパスはピクチャSrcの表示に影響を与えません.nsIDOMFileインターフェース:
DOMString getAsBinary(); 
DOMString getAsDataURL(); 
DOMString getAsText(in DOMString encoding); 
<input type="file" name="uploadImg"
onchange="Javascript:checkFileChange(this);"
size="12"/> 
function checkFileChange(obj) { 
    var img = document.getElementById("img"); 
    img.src = obj.files[0].getAsDataUrl(); 
    alert(obj.files[0].fileSize); 
}
以上は2つの異なるブラウザの処理方法ですが、彼らをどうやって融和しますか?私は下で私の作った例を貼り付けます.その中に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">
     //        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) { 
      //      
            $(".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>