FormData オブジェクト

導入

FormData はフォーム データを表し、ブラウザのネイティブ オブジェクトです。

フォーム インスタンスを構築するためのコンストラクターとして使用できます。

const formData = 新しい FormData();

上記の例では、FormData() がコンストラクターとして使用され、空のフォーム インスタンス オブジェクトを返します。

また、フォームの DOM ノードをパラメータとして受け入れ、フォームのすべての要素とその値をキーと値のペアに変換し、返されたインスタンス オブジェクトに含めることもできます。

const formData = 新しい FormData(フォーム);

上記の例では、FormData() のパラメータ form がフォームの DOM ノード オブジェクトです。

以下はスクリプト経由でフォームデータを送信する使用例です。

<form id="formElem">
  <input type="text" name="firstName" value="ジョン">
  画像: <input type="file" name="picture" accept="image/*">
  <input type="送信">
</form>

<スクリプト>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user-avatar', {
      メソッド: 'POST'、
      本体: 新しい FormData(formElem)
    });

    let result = await 応答.json();

    アラート(結果.メッセージ);
  };
</script>

ブラウザがフォーム データをサーバーに送信するとき、ユーザーが [送信] ボタンをクリックするか、スクリプトを使用して送信するかに関係なく、データは自動的にエンコードされ、「Content-Type: multipart/form-data」の形式で送信されます。

FormData() の 3 番目の使用法があります。フォームのキーと値のペアに「送信」ボタンを追加する場合は、ボタンの DOM ノードを FormData() の 2 番目のパラメーターとして使用できます。 `。

新しい FormData(フォーム、送信者)

上記のコードでは、「submitter」は送信ボタンの DOM ノードです。この使用法は、複数の送信ボタンがあるフォームに適しています。サーバーは、ボタンの値を使用して、ユーザーがどのボタンを選択したかを判断する必要があります。

// フォームには 2 つの送信ボタンがあります
// <button name="intent" value="save">保存</button>
// <button name="intent" value="saveAsCopy">コピーとして保存</button>

const form = document.getElementById("フォーム");
const submitter = document.querySelector("button[value=save]");

const formData = new FormData(フォーム, 送信者);

上の例では、FormData() が 2 番目のパラメータを追加し、インスタンス オブジェクト formData がキー名 intent とキー値 save を持つキーと値のペアを追加します。

##インスタンスメソッド

追加()

append() はキーと値のペアを追加する、つまりフォーム要素を追加するために使用されます。 2 つの使用形態があります。

FormData.append(名前, 値)
FormData.append(名前、BLOB、ファイル名)

最初のパラメータはキー名で、2 番目のパラメータはキー値です。 FormData.append(name, blob, fileName) の上の 2 番目の形式は、ファイル セレクター <input type="file"> を追加するのと同じです。2 番目のパラメーター blob は、ファイルのバイナリ コンテンツです。パラメータ fileName はファイル名です。

キー名がすでに存在する場合、新しいキー値がそれに追加されます。つまり、同じキー名に対して複数のキー値が存在します。

以下に使用例を示します。

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

for(let [名前, 値] of formData) {
  console.log(`${名前} = ${値}`);
}
// キー1 = 値1
// キー2 = 値2

以下はバイナリファイルを追加する例です。

// HTMLコードは以下の通り
// <canvas id="canvasElem" width="100" height="80" style="border:1px Solid"></canvas>

let imageBlob = await 新しい Promise(
  解決 => CanvasElem.toBlob(解決, 'image/png')
);

let formData = new FormData();
formData.append('image', imageBlob, 'image.png');

let response = await fetch('/article/formdata/post/image-form', {
  メソッド: 'POST'、
  本体: フォームデータ
});

let result = await 応答.json();
console.log(結果);

以下に XML ファイルを追加する例を示します。

const content = '<q id="a"><span id="b">やあ!</span></q>';
const blob = new Blob([コンテンツ], { type: "text/xml" });

formData.append('ユーザーファイル', blob);

消去（）

delete() は、指定されたキーと値のペアを削除するために使用され、そのパラメーターはキー名です。

FormData.delete(名前);

エントリ()

entries() は、すべてのキーと値のペアを走査するための反復子を返します。

FormData.entries()

以下に使用例を示します。

const form = document.querySelector('#subscription');
const formData = 新しい FormData(フォーム);
const 値 = [...formData.entries()];
console.log(値);

以下は、「entries()」を使用してキーと値のペアを反復処理する例です。

formData.append("key1", "value1");
formData.append("key2", "value2");

for (formData.entries() の const ペア) {
  console.log(`${ペア[0]}, ${ペア[1]}`);
}
// キー1、値1
// キー2、値2

得る（）

get() は指定されたキー名のキー値を取得するために使用され、パラメータはキー名です。

FormData.get(名前)

キー名に複数のキー値がある場合は、最初のキー値のみが返されます。指定されたキーが見つからない場合は、「null」が返されます。

getAll()

getAll() は指定されたキー名のすべてのキー値を取得するために使用され、そのパラメータはキー名であり、戻り値は配列です。指定されたキーが見つからない場合は、空の配列が返されます。

FormData.getAll(名前)

もっている（）

has() は、指定されたキー名が存在するかどうかを示すブール値を返し、そのパラメータはキー名です。

FormData.has(名前)

キー()

key() は、すべてのキー名を走査するために使用されるキー名のイテレータを返します。

FormData.keys()

以下に使用例を示します。

const formData = 新しい FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

for (formData.keys() の const キー) {
  コンソール.ログ(キー);
}
//キー1
//キー2

セット（）

set() は、指定されたキー名に新しいキー値を設定するために使用されます。 2 つの使用形態があります。

FormData.set(名前, 値);
FormData.set(名前、BLOB、ファイル名);

最初のパラメータはキー名で、2 番目のパラメータはキー値です。上記の 2 番目の形式はファイルをアップロードするもので、2 番目のパラメータ blob はファイルのバイナリ コンテンツ、3 番目のパラメータ fileName はファイル名です。このメソッドには戻り値がありません。

指定されたキーが存在しない場合はキーを追加します。存在しない場合は既存のキー値をすべて破棄し、キー名に対してキー値が 1 つだけ存在するようにします。これが append() との主な違いです。

値()

values() は、すべてのキー値を走査するために使用されるキー値のイテレータを返します。

FormData.values()

以下に使用例を示します。

const formData = 新しい FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

for (formData.values() の定数値) {
  console.log(値);
}
// 値1
// 値2