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

注意: 该功能在 Web Workers 中可用。

语法

var formData = new FormData(form)

参数

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

例子

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

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

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

formData.append('username', 'Chris');

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

<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属性,否则无法访问到值。

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

规范

规范 状态 备注
XMLHttpRequest
FormData()
Living Standard Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 7 4.0 (2.0) 10 12 5
append with filename (Yes) 22.0 (22.0) ? ? ?
available in web workers (Yes) 39.0 (39.0) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 ? 4.0 (2.0) ?

12

?
append with filename ? ? 22.0 (22.0) ? ? ?
Available in web workers ? ? 39.0 (39.0) ? ? ?

 

注意: XHR在Android 4.0上FormData的blob数据将发送空内容。

附注

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

相关链接

文档标签和贡献者

此页面的贡献者: kameii, sintrb
最后编辑者: kameii,