From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/formdata/append/index.html | 180 +++++++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 files/zh-cn/web/api/formdata/append/index.html (limited to 'files/zh-cn/web/api/formdata/append/index.html') diff --git a/files/zh-cn/web/api/formdata/append/index.html b/files/zh-cn/web/api/formdata/append/index.html new file mode 100644 index 0000000000..90f918c36d --- /dev/null +++ b/files/zh-cn/web/api/formdata/append/index.html @@ -0,0 +1,180 @@ +--- +title: FormData.append() +slug: Web/API/FormData/append +translation_of: Web/API/FormData/append +--- +

{{APIRef("XMLHttpRequest")}}

+ +

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

+ +

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

+ +
+

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

+
+ +

语法

+ +

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

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

参数

+ +
+
name
+
value中包含的数据对应的表单名称。
+
value
+
表单的值。可以是{{domxref("USVString")}} 或 {{domxref("Blob")}} (包括子类型，如 {{domxref("File")}})。
+
filename {{optional_inline}}
+
传给服务器的文件名称 (一个 {{domxref("USVString")}}), 当一个 {{domxref("Blob")}} 或 {{domxref("File")}} 被作为第二个参数的时候， {{domxref("Blob")}} 对象的默认文件名是 "blob"。 {{domxref("File")}} 对象的默认文件名是该文件的名称。
+
+ +
+

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

+
+ +

返回值

+ +

空

+ +

示例

+ +

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

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

你可以通过 {{domxref("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');
+ +

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

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
基础支持7{{CompatGeckoDesktop("2.0")}}[1]10125
支持filename参数{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
在web workers中可用{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
基础支持3.0[2]{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]1.0.1{{CompatUnknown}} +

12

+ 		{{CompatUnknown}}
支持filename参数{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("22.0")}}1.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
在web workers中可用{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("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.

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf