jQueryアップロードファイルのサイズとタイプを簡単に検証する方法

2794 ワード

この例では、jQueryがアップロードファイルのサイズとタイプを簡単に検証する方法について説明します.皆さんの参考にしてください.具体的には以下の通りです.




  
  
  
    $(document).ready(function () {
      $("#myFile").change(function () {
        var filepath = $("input[name='myFile']").val();
        var extStart = filepath.lastIndexOf(".");
        var ext = filepath.substring(extStart, filepath.length).toUpperCase();
        if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
          alert("    bmp,png,gif,jpeg,jpg  ");
          $("#fileType").text("")
          $("#fileSize").text("");
          return false;
        } else { $("#fileType").text(ext) }
        var file_size = 0;
        if ($.browser.msie) {
          var img = new Image();
          img.src = filepath;
          while (true) {
            if (img.fileSize > 0) {
              if (img.fileSize > 3 * 1024 * 1024) {
                alert("     100MB。");
              } else {
                var num03 = img.fileSize / 1024;
                num04 = num03.toFixed(2)
                $("#fileSize").text(num04 + "KB");
              }
              break;
            }
          }
        } else {
          file_size = this.files[0].size;
          var size = file_size / 1024;
          if (size > 10240) {
            alert("           10M!");
          } else {
            var num01 = file_size / 1024;
            num02 = num01.toFixed(2);
            $("#fileSize").text(num02 + " KB");
          }
        }
        return true;
      });
    });
  
       


  
PS:ここでは、いくつかのコードフォーマット、美化ツールをお勧めします.今後の開発過程で使用できると信じています.
オンラインJavaScriptコードの美化、フォーマットツール:http://tools.jb51.net/code/js
JavaScript圧縮/フォーマット/暗号化ツール:http://tools.jb51.net/code/jscompress
C言語スタイル/HTML/CSS/jsonコードフォーマット美化ツール:http://tools.jb51.net/code/ccode_html_css_json
XMLコードオンラインフォーマット美化ツール:http://tools.jb51.net/code/xmlcodeformat
jsonコードオンラインフォーマット/美化/圧縮/編集/変換ツール:http://tools.jb51.net/code/jsoncodeformat
オンラインJSONコード検査、検査、美化、フォーマットツール:http://tools.jb51.net/code/json
jQueryの関連内容についてもっと興味のある読者は、「jQuery常用プラグインと用法総括」、「jquery中Ajax用法総括」、「jQuery表(table)操作技巧総括」、「jQueryドラッグ特効と技巧総括」、「jQuery拡張技巧総括」、「jQueryよく見られる経典特効総括」、『jQueryアニメーションと特効用法まとめ』および『jqueryセレクタ用法まとめ』
本文で述べたことが皆さんのjQueryプログラム設計に役立つことを望んでいます.