FormData: FormData() コンストラクター - Web API | MDN
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
FormData() コンストラクターは、新しい FormData オブジェクトを生成します。
構文
js
new FormData()
new FormData(form)
new FormData(form, submitter)
引数
form省略可-
HTML の
<form>要素です。指定された場合、FormDataオブジェクトは、その各要素の name プロパティをキーに、それらの送信される値を値として使い、フォームの現在のキーと値が設定されます。ファイルからの入力内容は、エンコードもされます。 submitter省略可-
formのメンバーである送信ボタンです。もしsubmitterにname属性があるか、<input type="image">であった場合、このデータはFormDataオブジェクトに含まれます（例えばbtnName=btnValue）。
例外
TypeError-
指定した
submitterが送信ボタンでない場合に発生します。 NotFoundErrorDOMException-
指定した
submitterがformのメンバーでない場合に発生します。submitterはフォーム要素の子孫であるか、フォームを参照するform属性がなければなりません。
例
空の FormData の作成
次の行は、空の FormData オブジェクトを生成します。
js
const formData = new FormData();
append() を使って、これにキーと値のペアを追加することができます。
js
formData.append("username", "Chris");
HTML フォーム要素からの事前入力
オプションで form と submitter を指定すると、FormData オブジェクトを作成する際に、指定したフォームの値を事前入力することができます。
メモ: FormData オブジェクトに含まれるのは、正常なフォームコントロールのみです。つまり、名前を持ち、無効状態でないものです。
HTML
html
<form id="form">
<input type="text" name="text1" value="foo" />
<input type="text" name="text2" value="bar" />
<input type="text" name="text2" value="baz" />
<input type="checkbox" name="check" checked disabled />
<button name="intent" value="save">Save</button>
<button name="intent" value="saveAsCopy">Save As Copy</button>
</form>
<output id="output"></output>
form {
display: none;
}
output {
display: block;
white-space: pre-wrap;
}
JavaScript
js
const form = document.getElementById("form");
const submitter = document.querySelector("button[value=save]");
const formData = new FormData(form, submitter);
const output = document.getElementById("output");
for (const [key, value] of formData) {
output.textContent += `${key}: ${value}\n`;
}
結果
簡潔にするため、<form> 要素は非表示にしています。
仕様書
| Specification |
|---|
| XMLHttpRequest # dom-formdata |