在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

append() 方法在 FormData interface appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.

差异在 FormData.set and append() is that if the specified key already exists, FormData.set will overwrite all existing values with the new one, whereas append() will append the new value onto the end of the existing set of values.

注意 : This method is available in Web 工作者 .

句法

There are two versions of this method: a two and a three parameter version:

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

参数

名称

The name of the field whose data is contained in value .

value

The field's value. This can be a USVString or Blob (including subclasses such as File ). If none of these are specified the value is converted to a string.

filename 可选

The filename reported to the server (a USVString )，当 Blob or File is passed as the second parameter. The default filename for Blob objects is "blob". The default filename for File objects is the file's filename.

注意： If you specify a Blob as the data to append to the FormData object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.

返回

Void.

范例

The following line creates an empty FormData 对象：

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

You can add key/value pairs to this using FormData.append :

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

As with regular form data, you can append multiple values with the same name. For example (and being compatible with PHP's naming conventions by adding [] to the name):

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

This technique makes it simpler to process multi-file uploads because the resultant data structure is more conducive to looping.

If the sent value is different than String or Blob it will be automatically converted to String:

formData.append('name', true);
formData.append('name', 74);
formData.append('name', 'John');
formData.getAll('name'); // ["true", "74", "John"]
					

规范

规范	状态	注释
XMLHttpRequest The definition of 'append()' in that specification.	实时标准	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
append	Chrome 7	Edge 12	Firefox 4 4 Prior to Firefox 7, specifying a Blob as the data to append to the object, the filename reported in the Content-Disposition HTTP header was an empty string, resulting in errors on some servers. Starting with Firefox 7, the filename blob is sent.	IE 10 10 With the "Include local directory pass when uploading files to a server" option enabled, IE will change the filename inside the Blob on the fly. To have direct control of the sent filename, the developer should send the filename as the third parameter value, i.e. formData.append(name, value, filename) .	Opera 12	Safari 5	WebView Android 3 3 XHR in Android 4.0 sends empty content for FormData with blob .	Chrome Android 18	Firefox Android 4 4 Prior to Firefox 7, specifying a Blob as the data to append to the object, the filename reported in the Content-Disposition HTTP header was an empty string, resulting in errors on some servers. Starting with Firefox 7, the filename blob is sent.	Opera Android 12	Safari iOS 5	Samsung Internet Android 1.0
append with filename	Chrome Yes	Edge 12	Firefox 22	IE Yes	Opera ?	Safari 9	WebView Android Yes	Chrome Android Yes	Firefox Android 22	Opera Android ?	Safari iOS 9	Samsung Internet Android Yes

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

见实现注意事项。

另请参阅

• XMLHTTPRequest
• 使用 XMLHttpRequest
• 使用 FormData 对象
• <form>

元数据

• 最后修改： Sep 19, 2019

相关话题

1. FormData
2. 构造函数

   1. FormData()
3. 方法

   1. append()
   2. delete()
   3. entries()
   4. get()
   5. getAll()
   6. has()
   7. keys()
   8. set()
   9. values()
4. XMLHttpRequest 相关页面

   1. XMLHttpRequest
   2. XMLHttpRequestEventTarget
   3. XMLHttpRequestUpload