FormData.append()

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.

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

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

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

语法

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

js
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 对象：

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

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

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

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

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

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

规范

Specification
XMLHttpRequest Standard
# dom-formdata-append

浏览器兼容性

BCD tables only load in the browser

参见