FormData.append() - Web API 接口参考 编辑

FormData 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。

提示： 这个方法在 Web Workers 中可用。

语法

这个方法有两个版本：一个有两个参数的版本和一个有三个参数的版本。

formData.append(name, value);
formData.append(name, value, filename);

参数

name

value中包含的数据对应的表单名称。

value

表单的值。可以是USVString 或 Blob (包括子类型，如 File)。

filename可选

传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。

注意： 如果你指定一个 Blob 作为数据添加到 FormData 对象中， 文件名会被放在 "Content-Disposition" 头部（常常会根据浏览器变化而变化）传给服务器。

返回值

空

示例

下面的代码创建了一个空的 FormData 对象：

var formData = new FormData(); // Currently empty

你可以通过 FormData.append 往对象里加入键值对：

formData.append('username', 'Chris');
formData.append('userpic', myFileInput.files[0], 'chris.jpg');

跟常规表单数据一样，你可以使用同一个名称添加多个值 。例如 (为了与PHP命名习惯一致在名称中添加了[])：

formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');

这项技术使得多文件上传的处理更加简单，因为所得数据结构更有利于循环。

规范

Specification	Status	Comment
XMLHttpRequest append()	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!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基础支持	7	4.0 (2.0)[1]	10	12	5
支持filename参数	(Yes)	22.0 (22.0)	?	?	?
在web workers中可用	(Yes)	39.0 (39.0)	?	?	?

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基础支持	3.0[2]	?	4.0 (2.0)[1]	1.0.1	?	12	?
支持filename参数	?	?	22.0 (22.0)	1.2	?	?	?
在web workers中可用	?	?	39.0 (39.0)	?	?	?	?

[1] Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), if you specified a Blob as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0 the filename "blob" is sent.

[2] XHR in Android 4.0 sends empty content for FormData with blob.

相关链接

• XMLHTTPRequest
• Using XMLHttpRequest
• Using FormData objects
• <form>