1. ホーム
  2. javascript

[解決済み] jQueryでファイルの入力サイズをチェックするには?

2022-05-08 01:53:22

質問

ファイルアップロード機能を持つフォームがあるのですが、ユーザーがアップロードしようとしているファイルが大きすぎる場合、クライアントサイドで素敵なエラーレポートを表示できるようにしたいのですが、jQueryでファイルサイズをチェックする方法はありますか?

解決方法は?

ファイルシステムへのアクセス(ローカルファイルの読み書きなど)はできませんが、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必須)でないと動作しないので、そのために ここで の詳細と、その他の知っておくべきファイル情報についてのリンクがあります。 http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/


旧ブラウザ対応

古いブラウザでは null の値は、以前の this.files を呼び出すので this.files[0] は例外を発生させるので File APIがサポートされているか確認する 使用する前に