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() は、既存の値のセットの最後に新しい値を追加します。

メモ: このメソッドはウェブワーカーで使用できます。

構文

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

引数

name

value にあるデータのフィールド名です。

value

フィールドの値です。文字列または Blob（File などのサブクラスを含む）です。これらの何れでもないものが指定された場合、値は文字列に変換されます。

filename 省略可

第 2 引数に Blob または File を渡した場合に、サーバーに報告されるファイル名（文字列）です。Blob オブジェクトの既定のファイル名は "blob" です。File オブジェクトの既定値は、ファイルのファイル名です。

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

返値

なし (undefined)。

例

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

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

js
formData.append("userpic", myFileInput.files[0], "chris.jpg");

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

js
formData.append("userpic", myFileInput.files[0], "chris1.jpg");
formData.append("userpic", myFileInput.files[1], "chris2.jpg");

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

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

仕様書

Specification
XMLHttpRequest Standard
# dom-formdata-append

ブラウザーの互換性

BCD tables only load in the browser

関連情報