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

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

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

関連情報