1. ホーム
  2. html

[解決済み] ファイルアップロードのサイズ制限 (html input 要素)

2022-10-15 23:23:38

質問

ユーザーがアップロードできるファイルのサイズを簡単に制限したいのですが。

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オブジェクトを使用していないので、これはすべてのブラウザで動作するはずです。