FormData.append()

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

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

メモ: このメソッドは Web Workers で使用できます。

Syntax

There are two versions of this method: a two and a three parameter version:

formData.append(name, value);
formData.append(name, value, filename);

Parameters

name: The name of the field whose data is contained in value.
value: The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.
filename 省略可: The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob". The default filename for File objects is the file's filename.

メモ: If you specify a Blob as the data to append to the FormData object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.

Returns

Void.

Example

The following line creates an empty FormData object:

var formData = new FormData(); // Currently empty

You can add key/value pairs to this using FormData.append:

formData.append('username', 'Chris');
formData.append('userpic', myFileInput.files[0], 'chris.jpg');

As with regular form data, you can append multiple values with the same name. For example (and being compatible with PHP's naming conventions by adding [] to the name):

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

This technique makes it simpler to process multi-file uploads because the resultant data structure is more conducive to looping.

If the sent value is different than String or Blob it will be automatically converted to String:

formData.append('name', true);
formData.append('name', 74);
formData.append('name', 'John');

formData.getAll('name'); // ["true", "74", "John"]

Specifications

Specification
XMLHttpRequest Standard # dom-formdata-append