JavaScript FormData インターフェイスは、キーと値のペアを持つオブジェクトを作成するメソッドを提供します。これらのオブジェクトは、 fetch() または XMLHttpRequest.send() メソッドを使用してインターネット上で共有できます。 HTML フォーム要素の機能を使用します。エンコード タイプが「multipart/form-data」に設定されているフォームで使用されるのと同じ形式が使用されます。

また、GET リクエスト送信時のタグ動作と同様に、これを URLSearchParams コンストラクターに直接渡してクエリ パラメーターを取得することもできます。

通常、サーバーに送信するデータセットを作成するために使用されます。 FormData オブジェクトは、要素ごとに 1 つの配列を含む配列の配列です。

これらの配列には次の 3 つの値があります。

名前： フィールドの名前が含まれます。

価値： これにはフィールドの値が含まれており、これは String オブジェクトまたは Blob オブジェクトにすることができます。

ファイル名： これには、名前を保持する文字列であるファイル名が含まれます。名前は、BLOB オブジェクトが 2 として渡されるときにサーバーに保存されます。^ndパラメータ。

なぜフォームデータなのか?

HTML フォーム要素は、そのフィールドと値を自動的に取得する方法で開発されます。このようなシナリオでは、FormData インターフェイスを使用すると、ファイルや追加フィールドの有無にかかわらず HTML フォームを送信できます。

ユーザーが入力したフォームデータを含むオブジェクトです。

以下はフォーム データ コンストラクターです。

 let formData = new FormData([form]); 

FormData オブジェクトは、フェッチなどのネットワーク メソッドによって本体として受け入れられます。デフォルトでは、Content-Type: multipart/form-data でエンコードされ、送信されます。

サーバーはこれを通常のフォーム送信とみなします。

FormData を送信する簡単な例を理解してみましょう。

基本的な FormData の送信

以下のフォームでは、単純な FormData をサーバーに送信しています。

インデックス.html:

 formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; 

上の例では、データを送信するためのバックエンド API は設定していません。これはこのチュートリアルの範囲を超えているためです。ただし、[ネットワーク] タブへのペイロードを確認して、FormData インターフェイスがどのように動作するかを理解することができます。

したがって、開発者ツールでネットワーク リクエストを見ると、次のペイロードが表示されます。

上記のネットワーク リクエストでは、FormData オブジェクトを使用してフォーム データがネットワーク経由で送信されます。他の方法では、フォームからデータを取得するために複数のメソッドを指定する必要があります。

したがって、FormData インターフェイスを使用すると、formData をサーバーに簡単に送信できます。それは単なるワンライナーコードです。

FormData コンストラクター

FormData() コンストラクターは、新しい FormData オブジェクトを作成するために使用されます。次のような方法で使用できます。

 new FormData() new FormData(form) new FormData(form, submitter) 

パラメーター：

フォーム (オプション):

これは HTML 要素です。これが指定されている場合、FormData オブジェクトにはフォームの現在のキー/値が設定されます。キーには各要素の name 属性プロパティを使用し、値には送信された値を使用します。ファイル入力コンテンツもエンコードします。

提出者 (オプション):

送信者ボタンはフォームの要素です。 submitter 要素に name 属性プロパティがある場合、そのデータは FormData オブジェクトに含まれます。

Javaカウンター

FormData メソッド

FormData には、フォーム フィールド データへのアクセスと変更に役立つメソッドがいくつか用意されています。

まれに、フォーム データをサーバーに送信する前に変更が必要になる場合があります。これらの方法は、このような場合に役立ちます。

次に、いくつかの便利な formData メソッドを示します。

formData.append(名前, 値)

これは 2 つの引数の名前と値を受け取り、指定された名前と値を持つフォーム フィールド オブジェクトを追加します。

formData.append(名前、BLOB、ファイル名)

name、blob、および fileName 引数を受け取ります。 HTML 要素が の場合、データ オブジェクトを形成するフィールドを追加し、3 番目の引数 fileName はユーザーのファイル システム内のファイル名に従ってファイル名を設定します。

formData.delete(名前)

名前を引数として受け取り、同じ名前を持つ指定されたフィールドを削除します。

formData.get(名前)

また、引数として名前を受け取り、指定された名前で指定されたフィールドの値を取得します。

formData.has(名前)

また、名前を引数として受け取り、指定された名前でフィールドの存在を確認し、存在する場合は true を返します。それ以外の場合は false。

フォームには同じ名前のフィールドが複数ある場合があるため、同じ名前のフィールドをすべて追加するには複数の追加メソッドを指定する必要があります。

ただし、同じ名前のフィールドがあるとエラーが発生し、データベースにフィールドを設定する際に複雑さが生じます。したがって、formData は、append と同じ構文を持つ別のメソッドを提供しますが、指定された名前のフィールドをすべて削除してから、新しいフィールドを追加します。したがって、名前が付いた一意のキーが存在することが保証されます。

 formData.set(name, value) formData.set(name, blob, fileName) 

set メソッドでは、構文は append メソッドと同様に機能します。

FormDataを反復するにはどうすればよいですか?

FormData は、すべてのキーを反復処理するメソッド FormData.entries() を提供します。このメソッドは、FormData 内のすべてのキー/値エントリを反復処理する反復子を返します。キーは文字列オブジェクトですが、値は BLOB または文字列のいずれかになります。

以下の例を考えてみましょう。

 formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } 

上記の例の出力は次のようになります。

 key1, value1 key2, value2 

データファイルを含むフォームの送信

ファイルは FormData を使用して送信することもできます。ファイルは form 要素で動作し、Content-Type: multipart/form-data として送信されます。 multipart/form-data エンコーディングにより、ファイルの送信が可能になります。したがって、デフォルトではフォームデータの一部です。フォームデータエンコーディングを使用してファイルをサーバーに送信できます。

以下の例を考えてみましょう。

 File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; 

上記の例では、画像オブジェクトは FormData を使用してバイナリ形式で送信されます。開発者ツールのネットワークタブで確認できます。

配列リストのソート

フォームデータをBlobオブジェクトとして送信する

フォーム データを BLOB オブジェクトとして送信することは、動的に生成されたバイナリ データを送信する簡単な方法です。任意の画像または blob を指定できます。フェッチボディに渡すことで、サーバーに直接送信できます。

画像データや名前、パスワードなどのその他のフォーム データを送信すると便利です。また、サーバーはバイナリ データよりもマルチパートでエンコードされたフォームを受け入れやすくなります。

以下の例を考えてみましょう。これは、画像を他のフォーム データとともにフォームとして送信します。

 mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } 

上の例では、画像 blob が次のように追加されていることがわかります。

 formData.append('image', imageBlob, 'image.webp'); 

これは と同じで、ユーザーはファイル システムからのデータ imageBlob を含む「image.webp」という名前のファイルを送信しました。サーバーはそれを通常の形式のデータとして読み取ります。