<input type="file"> ファイルのアップロードを実現します

こんにちは、こんにちは、また来ました。今日はプロジェクトでの一般的な例について説明します。それは、input type="file"を使用してフォームにファイルをアップロードすることです。まずhtmlを以下のように書きます。

    <form id="form1" action="/" method="post" enctype="multipart/form-data">
        <div>
            <label for="profile_pic">Choose file to upload</label>
            <input multiple="multiple" type="file" id="profile_pic" name="profile_pic" accept=".jpg,.jpeg,.png">
        </div>
        <div>
            <button type="button" id="btn">提交</button>
        </div>
    </form>

これはフォームフォームであり、メソッドメソッドは post で、action 属性はフォームが送信されたときにフォームデータを送信する場所を指定します。(これは必須属性です)、代わりに「/」を直接使用します。enctype はencode typeの略で、エンコードタイプを意味します。デフォルトでは、enctype の値は application/x-www-form-urlencoded になっており、ファイルのアップロードには使用できませんが、multipart/form-data を使用した場合にのみファイルデータを完全に送信できます。

次に、input type="file" を使用してクリックしてファイルをアップロードします。複数というのはさまざまですが、ここでは複数のファイルをアップロードできることを意味します (複数のファイルを選択するには Ctrl キーを押したままにします)。accept は、画像ファイル、ビデオファイル、オーディオファイルのみをアップロードするなど、ファイルのアップロードの種類を制限できます。次に、このボタンをクリックすると、type="button" と書かなければ、 js を書かずに直接送信できることがわかります。なぜ？button には type 属性があり、 type にはbutton、submit、resetの 3 つのオプションの属性があることがわかります。また、ボタンの type 属性のデフォルト値はsubmitであるため、type 属性が指定されていない場合は、ボタンをクリックするとボタンはフォームの送信をトリガーします。解決策: type 属性をボタンに追加し、属性値を button に設定すると、問題は解決します。

ここでフォーム検証用の js を作成します。コードは次のとおりです。

        const btn = document.getElementById("btn");
        const form1 = document.getElementById("form1");
        const pic = document.getElementById("profile_pic");
        btn.onclick = function () {
            //如果文件输入框的文件的长度为0，则弹出警告
            if (pic.files.length == 0) {
                alert("请先至少选择一个文件！");
                return;
            }
            //提交文件    HTMLFormElement.submit() 用来提交表单 <form>。
            //判断文件是否符合要求
            for (let i = 0; i < pic.files.length; i++) {
                console.log(i);  //0 1 2 3
                if (!checkFormat(pic.files[i])) {
                    alert("请确保上传的文件符合要求(.jpg/.png/.jpeg)")
                    return
                }
            }
            alert("上传成功!")
            form1.submit();
        }

        function checkFormat(o) {
            let filename = o.name;//文件名称
            let suffix = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();  //png jpg等
            let file_format = ['jpg', 'png', 'jpeg'];
            //看看这个后缀存不存在于file_format数组当中
            if (file_format.includes(suffix)) {
                return true
            }
            return false
        }

1. まずボタン、フォーム、input[type="file"]のdomオブジェクトを取得し、ボタンがクリックされた際にファイル入力ボックスのファイル長が0であると判断し、警告を出します。ポップアップが表示され、戻ると送信が禁止されます。

2. 次に、ファイルがある場合は、「送信」をクリックして、ファイル形式が要件を満たしているかどうかを判断します。ここではメソッド (checkFormat) がカプセル化されており、パラメータはオブジェクトです。オブジェクト名の最後の "." のサフィックスが指定された配列の値である場合は true を返し、それ以外の場合は false を返します。ここでは、新しい ES6 機能のincludeメソッドを使用して、サフィックス名が配列内にあるかどうかを判断します。いずれかが欠けている場合は、警告がポップアップ表示されます。アップロードされたファイルが要件 (.jpg/.png/.jpeg) を満たしていることを確認してから、送信の禁止に戻ります。

3. すべてが満足であれば、送信は成功です。

ご質問がございましたら、コメント欄でお待ちしております。また次回お会いしましょう!

<input type="file"> ファイルのアップロードを実現します

おすすめ