We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

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!

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.

相关链接

文档标签和贡献者

此页面的贡献者: hayond, stevobm, wth
最后编辑者: hayond,