FormDataにフィールドを追加・変更
FormDataにフィールドを追加・変更するには、FormData.appendメソッドまたはFormData.setメソッドを使用します。
既にフィールド名が存在している場合、FormData.appendメソッドはフィールド名で新しく追加していくのに対し、FormData.setメソッドは値を上書きします。
値はBlob型やFile型といったファイル形式も指定することができます。
構文
append
JavaScript
FormData.append(name, value, filename);set
JavaScript
FormData.set(name, value, filename);引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
name | string | フィールド名を指定。 |
| 第二引数 | value | string | Blob | File | 設定または変更する値を指定。 |
| 第三引数 | filename | string | 第二引数にBlob型またはFile型を指定した時、送信するファイル名を指定。 |
サンプルコード
JavaScript (ES5)
// 新規のフォームオブジェクトを生成
var formData = new FormData();
// キーと値のペアを初期設定
formData.append('foo', 'abc');
// 上書き
formData.set('foo', '123');
// 追加
formData.append('foo', 'def');
// 添付ファイルを追加
formData.set('image', document.querySelector('[type="file"]').files[0], 'sample.jpg');JavaScript (ES6以降)
// 新規のフォームオブジェクトを生成
const formData = new FormData();
// キーと値のペアを初期設定
formData.append('foo', 'abc');
// 上書き
formData.set('foo', '123');
// 追加
formData.append('foo', 'def');
// 添付ファイルを追加
formData.set('image', document.querySelector('[type="file"]').files[0], 'sample.jpg');
console.log(formData);