FormDataを使用して単一または複数のファイルを簡単にアップロードする方法

この投稿では、HTML5仕様の一部として最新のWebブラウザーで使用できるFormDataインターフェースについて学習します。

Ajax、Angular 7、Ionic、ReactでFormDataを使用する例を見ていきます。

FormDataとは

FormDataは、キーと値のペアを格納するために使用できる単なるデータ構造です。その名前が示すように、フォームデータを保持するように設計されています。つまり、JavaScriptで使用して、HTMLフォームに対応するオブジェクトを作成できます。これは、フォームデータをRESTful APIエンドポイントに送信する必要がある場合、たとえば、XMLHttpRequestインターフェイス、fetch()API、またはAxiosを使用して単一または複数のファイルをアップロードする場合に最も役立ちます。

new次のように演算子を使用してFormDataインターフェイスをインスタンス化することにより、FormDataオブジェクトを作成できます。

const formData = new FormData() 

formData参照はいるFormDataのインスタンスを指します。オブジェクトに対して多くのメソッドを呼び出して、データのペアを追加および操作できます。各ペアにはキーと値があります。

FormDataオブジェクトで使用できるメソッドは次のとおりです。

  • append():キーと値のペアをオブジェクトに追加するために使用されます。キーがすでに存在する場合、値はそのキーの元の値に追加されます。
  • delete():キーと値のペアを削除するために使用されます。
  • entries():オブジェクト内のキーと値のペアのリストをループするために使用できるIteratorオブジェクトを返します。
  • get():キーの値を返すために使用されます。複数の値が追加された場合、最初の値を返します。
  • getAll():指定されたキーのすべての値を返すために使用されます。
  • has():キーがあるかどうかを確認するために使用されます。
  • keys():オブジェクトで使用可能なキーを一覧表示するために使用できるIteratorオブジェクトを返します。
  • set():指定されたキーを使用して、オブジェクトに値を追加するために使用されます。キーがすでに存在する場合、これにより値が再レースされます。
  • values():FormDataオブジェクトの値のIteratorオブジェクトを返します。

VanillaJavaScriptを使用したファイルアップロードの例

レッツ・今バニラはJavaScriptを使用して、ファイルアップロードの簡単な例を参照してください、XMLHttpRequestFormData

作業フォルダに移動index.htmlし、次のコンテンツを作成してファイルします。

   Parcel Sandbox 

IDで識別されるHTMLドキュメントを作成するだけappです。次に、タグindex.jsを使用してファイルを含めます

次に、index.jsファイルを作成し、次のコードを追加します。

document.getElementById("app").innerHTML = ` 

File Upload & FormData Example

`; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });

まず、HTMLページに要素を挿入します。これは、アップロードするファイルを選択するために使用されます。

次に、querySelector()メソッドを使用してファイル入力要素をクエリします。

次に、ファイルアップロードエンドポイントのアドレスを保持uploadFile()するAPI_ENDPOINT変数を最初に宣言するメソッド  を定義します。次に、XMLHttpRequestリクエストと空のFormDataオブジェクトを作成します。

FormDataのappendメソッドを使用して、uploadFile()メソッドにパラメーターとして渡されたファイルをキーに追加しますfile。これにより、キーfileとして、渡されたファイルの内容を値として持つキーと値のペアが作成されます。

次に、のsend()メソッドを使用してリクエストを送信XMLHttpRequestし、FormDataオブジェクトを引数として渡します。

uploadFile()メソッドを定義した後、要素の変更イベントをリッスンuploadFile()し、選択したファイルを引数としてメソッドを呼び出し  ます。ファイルはevent.target.files配列からアクセスされます。

このコードサンドボックスからこの例を試すことができます。

複数のファイルをアップロードする

上記のコードを簡単に変更して、複数のファイルのアップロードをサポートできます。

まず、multipleプロパティを要素に追加する必要があります。

これで、ドライブから複数のファイルを選択できるようになります。

次に、uploadFile()引数としてファイルの配列を受け入れるようにメソッドを変更し、配列をループしてファイルをFormDataオブジェクトに追加します。

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); }; 

最後に、ファイルの配列を引数としてメソッドを呼び出します。

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); }); 

Next, you can check out these advanced tutorials for how to use FormData with Angular, Ionic and React:

  • How to Post FormData with Angular 7
  • React & Axios FormData
  • Multiple File Upload with Ionic 4 & FormData