FormData()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

备注: 此特性在 Web Worker 中可用。

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

语法

js
new FormData(form)

参数

form 可选

一个 HTML 上的<form>表单元素——当指定了,这种方式创建的FormData对象会自动将 form 中的表单值也包含进去,包括文件内容也会被编码之后包含进去。

例子

下面的代码将创建一个空的 FormData 对象:

js
var formData = new FormData(); // 当前为空

你可以使用FormData.append来添加键/值对到表单里面;

js
formData.append("username", "Chris");

或者你可以使用可选的 form 参数来创建一个带预置数据的 FormData 对象:

html
<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc" />
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile" />
  </div>
  <input type="submit" value="Submit!" />
</form>

备注: 所有的输入元素都需要有 name 属性,否则无法访问到值。

js
var myForm = document.getElementById("myForm");
formData = new FormData(myForm);

规范

Specification
XMLHttpRequest
# dom-formdata

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
FormData() constructor
submitter parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

附注

在 Gecko 7.0 之前,如果你将Blob作为数据添加到 form 对象中,文件名就是空的,这可能导致服务器在 HTTP 头的 Content-Disposition 中设置的文件名为空而引起错误。从 Gecko 7.0 开始,将会使用"blob"作为 Blob 数据的文件名。

参见