[解決済み] ファイルアップロードのサイズ制限 (html input 要素)
質問
ユーザーがアップロードできるファイルのサイズを簡単に制限したいのですが。
maxlength = 20000 = 20kと思ったのですが、全く機能しないようです。
私は PHP ではなく Rails で実行していますが、クライアント側の HTML/CSS でそれを行うか、最後の手段として jQuery を使用する方がはるかに簡単だと考えていました。これはとても基本的なことなので、私が見逃しているか、気づいていない HTML タグがあるはずです。
IE7+、Chrome、FF3.6+をサポートするように探しています。必要であれば、IE8+のサポートだけで済ませられると思います。
ありがとうございます。
どのように解決するのですか?
これは完全に可能です。Javascriptを使用します。
入力要素を選択するためにjQueryを使っています。on change イベントで設定しています。
$("#aFile_upload").on("change", function (e) {
var count=1;
var files = e.currentTarget.files; // puts all files into an array
// call them as such; files[0].size will get you the file size of the 0th file
for (var x in files) {
var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB
if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) {
if (count > 1) {
approvedHTML += ", "+files[x].name;
}
else {
approvedHTML += files[x].name;
}
count++;
}
}
$("#approvedFiles").val(approvedHTML);
});
上記のコードでは、実際に投稿が行われる前に、投稿ページに永続化する価値があると私が判断したすべてのファイル名を保存しています。jQuery を使用して入力要素の val に "approved" ファイルを追加し、フォームの送信で保存したいファイルの名前を送信できるようにしています。すべてのファイルが送信されますが、サーバー側でこれらのファイルをフィルタリングする必要があります。そのためのコードはまだ書いていないが、想像力を働かせてほしい。forループで、入力フィールドから送られた名前を$_FILES(PHPスーパーグローバル、ごめんなさい、rubyファイル変数は知りません)変数にマッチさせることで、これを達成できると仮定しています。
私が言いたいのは、送信前にファイルのチェックを行うことができるということです。私はこれを行い、フォームを送信する前にユーザーに出力して、彼らが私のサイトに何をアップロードしているのかを知らせます。基準を満たさないものはユーザーに表示されないので、ユーザーは大きすぎるファイルは保存されないことを知ることができます。FormDataオブジェクトを使用していないので、これはすべてのブラウザで動作するはずです。
関連
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)
-
[解決済み】HTMLのテキスト入力で数値入力しかできない。
-
[解決済み】<input type="file">でファイル形式を制限する?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
iframeフレームワークの使用
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?
-
[解決済み】JavaScriptによるファイルアップロードのサイズ検証