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');

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐