FormData: FormData() 构造函数

基线 广泛可用

此功能已得到良好验证，可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

注意：此功能在 Web Workers 中可用。

FormData() 构造函数创建一个新的 FormData 对象。

语法

js
new FormData()
new FormData(form)
new FormData(form, submitter)

参数

form 可选

HTML <form> 元素 - 当指定时，FormData 对象将使用每个元素的 name 属性作为键，其提交的值作为值，填充该 form 的当前键值对。它还会对文件输入内容进行编码。当创建 FormData 对象时，会在表单上触发 formdata 事件，允许表单在必要时修改 formdata。

submitter 可选

作为 form 成员的 提交按钮。如果 submitter 具有 name 属性，或者是一个 <input type="image">，其数据 将被包含 在 FormData 对象中（例如 btnName=btnValue）。

异常

TypeError

如果指定的 submitter 不是 提交按钮，则抛出此异常。

NotFoundError DOMException

如果指定的 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>

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> 元素隐藏在视图中。

规范

规范
XMLHttpRequest 标准
# dom-formdata

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅