web-dev-qa-db-ja.com

jQueryでファイル入力サイズを確認する方法は？

ファイルアップロード機能を備えたフォームがあり、ユーザーがアップロードしようとしているファイルが大きすぎる場合、Niceクライアントサイドのエラー報告ができるようにしたいと思います。jQueryでファイルサイズをチェックする方法はありますかクライアント上で、または何らかの形でファイルをサーバーにポストバックして確認しますか？

javascriptjqueryfile-upload
127
Jimmy

実際にはファイルシステムにアクセスできません（たとえば、ローカルファイルの読み取りと書き込み）。ただし、HTML5 File Api仕様により、アクセスできるファイルプロパティがいくつかあり、ファイルサイズはそれらの1つです。

以下のHTMLの場合

<input type="file" id="myFile" />

以下を試してください：

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

これはHTML5仕様の一部であるため、最新のブラウザー（IEに必要なv10）でのみ機能し、 here 知っておくべきその他のファイル情報に関する詳細とリンクを追加しました： http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

古いブラウザのサポート

古いブラウザは前のthis.files呼び出しに対してnull値を返すため、this.files[0]にアクセスすると例外が発生するため、使用する前に File APIサポートを確認 する必要があることに注意してください

262
Felipe Sabino

JQueryのvalidateを使用する場合は、次のメソッドを作成してください。

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (en bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

あなたはそれを使うでしょう：

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});
37
Naoise Golden

このコード：

$("#yourFileInput")[0].files[0].size;

フォーム入力のファイルサイズを返します。

FF 3.6以降では、このコードは次のようになります。

$("#yourFileInput")[0].files[0].fileSize;
21
jeferod83

ASP.NET FileUploadコントロールに使用されるソリューションも投稿しています。おそらく誰かが便利だと思うでしょう。

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //reset file upload control
           this.value = null;
        }
    })
});
12
Besnik Kastrati

以下を使用してファイルのサイズを確認し、大きいかどうかを確認してください。

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });
2
Umesh Patil

このタイプのチェックはFlashまたはSilverlightで実行できますが、Javascriptでは実行できません。 javascriptサンドボックスは、ファイルシステムへのアクセスを許可しません。サイズのチェックは、アップロード後にサーバー側で行う必要があります。

Silverlight/Flashルートを使用する場合は、通常のコントロールを使用する通常のファイルアップロードハンドラーにデフォルトでインストールされていないことを確認できます。このように、Silverlight/Flashがインストールされている場合、エクスペリエンスはもう少し豊かになります。

1
Kelsey
<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
    function checkSize(){
        var size = $('#uploadForm')["0"].firstChild.files["0"].size;
        console.log(size);
    }
</script>

標準のajax/html5メソッドを使用してフォームを送信する予定がない場合、これが最も簡単であることがわかりましたが、もちろん何でも機能します。

ノート：

var size = $('#uploadForm')["0"]["0"].files["0"].size;

これは以前は機能していましたが、chromeでは機能しなくなりました。上記のコードをテストしたところ、ffとchrome（最後の）の両方で機能しました。 2番目の["0"]は、firstChildになりました。

1
Dillon Burnett

これを試してください：

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}
0
Bablu Ahmed