[解決済み] 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がサポートされているか確認する
使用する前に
関連
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQuery Ajax ファイルアップロード
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
jsを使った簡単な照明スイッチのコード
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
[解決済み] テスト
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR