FormData: append() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

メモ: この機能はウェブワーカー内で利用可能です。

append() は FormData インターフェイスのメソッドで、FormData オブジェクト内の既存のキーに新しい値を追加します。キーがまだ存在しない場合は追加します。

set() と append() の違いは、指定されたキーが既に存在する場合、set() は既存のすべての値を新しい値で上書きすることです。一方、append() は、既存の値のセットの最後に新しい値を追加します。

構文

append(name, value)
append(name, value, filename)

name: value にあるデータのフィールド名です。
value: フィールドの値です。文字列または Blob（File などのサブクラスを含む）です。これらの何れでもないものが指定された場合、値は文字列に変換されます。
filename 省略可: 第 2 引数に Blob または File を渡した場合に、サーバーに報告されるファイル名（文字列）です。Blob オブジェクトの既定のファイル名は "blob" です。File オブジェクトの既定値は、ファイルのファイル名です。

メモ: FormData オブジェクトに追加するデータとして Blob を指定した場合、"Content-Disposition" ヘッダーでサーバーに報告されるファイル名はブラウザーによって異なることがあります。

なし (undefined)。

formData.append("username", "Chris");

値が Blob （または File）である場合、filename 引数でそのファイル名を指定します。

formData.append("user-pic", myFileInput.files[0], "chris.jpg");

通常のフォームデータと同様に、同じ名前の複数の値を追加することができます。

formData.append("user-pic", myFileInput.files[0], "chris1.jpg");
formData.append("user-pic", myFileInput.files[1], "chris2.jpg");

値が文字列でも Blob でもない場合、append() は自動的に文字列に変換します。

formData.append("name", true);
formData.append("name", 72);
formData.getAll("name"); // ["true", "72"]

Specification
XMLHttpRequest # dom-formdata-append