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 ++++++++++++++++++++ files/zh-cn/web/api/formdata/entries/index.html | 141 ++++++++++++++++ files/zh-cn/web/api/formdata/formdata/index.html | 184 +++++++++++++++++++++ files/zh-cn/web/api/formdata/get/index.html | 145 ++++++++++++++++ files/zh-cn/web/api/formdata/getall/index.html | 145 ++++++++++++++++ files/zh-cn/web/api/formdata/has/index.html | 144 ++++++++++++++++ files/zh-cn/web/api/formdata/index.html | 81 +++++++++ files/zh-cn/web/api/formdata/keys/index.html | 138 ++++++++++++++++ files/zh-cn/web/api/formdata/set/index.html | 152 +++++++++++++++++ .../api/formdata/using_formdata_objects/index.html | 149 +++++++++++++++++ files/zh-cn/web/api/formdata/values/index.html | 141 ++++++++++++++++ .../formdata/\345\210\240\351\231\244/index.html" | 71 ++++++++ 12 files changed, 1671 insertions(+) create mode 100644 files/zh-cn/web/api/formdata/append/index.html create mode 100644 files/zh-cn/web/api/formdata/entries/index.html create mode 100644 files/zh-cn/web/api/formdata/formdata/index.html create mode 100644 files/zh-cn/web/api/formdata/get/index.html create mode 100644 files/zh-cn/web/api/formdata/getall/index.html create mode 100644 files/zh-cn/web/api/formdata/has/index.html create mode 100644 files/zh-cn/web/api/formdata/index.html create mode 100644 files/zh-cn/web/api/formdata/keys/index.html create mode 100644 files/zh-cn/web/api/formdata/set/index.html create mode 100644 files/zh-cn/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/zh-cn/web/api/formdata/values/index.html create mode 100644 "files/zh-cn/web/api/formdata/\345\210\240\351\231\244/index.html" (limited to 'files/zh-cn/web/api/formdata') 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.

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/entries/index.html b/files/zh-cn/web/api/formdata/entries/index.html new file mode 100644 index 0000000000..54baa447ca --- /dev/null +++ b/files/zh-cn/web/api/formdata/entries/index.html @@ -0,0 +1,141 @@ +--- +title: FormData.entries() +slug: Web/API/FormData/entries +translation_of: Web/API/FormData/entries +--- +

{{APIRef("XMLHttpRequest")}}

+ +

The FormData.entries() 方法返回一个 {{jsxref("Iteration_protocols",'iterator')}}对象 ，此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 {{domxref("USVString")}} 对象；value是一个 {{domxref("USVString")}} , 或者 {{domxref("Blob")}}对象。

+ +
+

Note: 此方法在 Web Workers 可用.

+
+ +

语法

+ +
formData.entries();
+ +

返回值

+ +

返回 {{jsxref("Iteration_protocols","iterator")}}。

+ +

示例

+ +
// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the key/value pairs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+
+ +

执行结果为:

+ +
key1, value1
+key2, value2
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

浏览器兼容

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatChrome(50.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatGeckoMobile(44)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}     {{CompatChrome(50.0)}}
+
+ +

 

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/formdata/index.html b/files/zh-cn/web/api/formdata/formdata/index.html new file mode 100644 index 0000000000..1ea36b03bc --- /dev/null +++ b/files/zh-cn/web/api/formdata/formdata/index.html @@ -0,0 +1,184 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +translation_of: Web/API/FormData/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

FormData()构造函数用于创建一个新的{{domxref("FormData")}}对象。

+ +
+

注意: 该功能在 Web Workers 中可用。

+
+ +

语法

+ +
var formData = new FormData(form)
+ +

参数

+ +
+
form {{optional_inline}}
+
一个HTML 上的{{HTMLElement("form")}}表单元素——当指定了，这种方式创建的{{domxref("FormData")}}对象会自动将form中的表单值也包含进去，包括文件内容也会被编码之后包含进去。
+
+ +

例子

+ +

下面的代码将创建一个空的FormData对象:

+ +
var formData = new FormData(); // 当前为空
+ +

你可以使用{{domxref("FormData.append")}}来添加键/值对到表单里面；

+ +
formData.append('username', 'Chris');
+
+ +

或者你可以使用可选的form参数来创建一个带预置数据的FormData对象:

+ +
<form id="myForm" name="myForm">
+  <div>
+    <label for="username">Enter name:</label>
+    <input type="text" id="username" name="username">
+  </div>
+  <div>
+    <label for="useracc">Enter account number:</label>
+    <input type="text" id="useracc" name="useracc">
+  </div>
+  <div>
+    <label for="userfile">Upload file:</label>
+    <input type="file" id="userfile" name="userfile">
+  </div>
+<input type="submit" value="Submit!">
+</form>
+
+ +
+

注意: 所有的输入元素都需要有name属性，否则无法访问到值。

+
+ +
var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7{{CompatGeckoDesktop("2.0")}}10125
append with filename{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}} +

12

+ 		{{CompatUnknown}}
append with filename{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ +

 

+ +
+

注意: XHR在Android 4.0上FormData的blob数据将发送空内容。

+
+ +

附注

+ +

在Gecko 7.0 {{geckoRelease("7.0")}}之前, 如果你将{{domxref("Blob")}}作为数据添加到form对象中，文件名就是空的，这可能导致服务器在HTTP头的Content-Disposition中设置的文件名为空而引起错误。 从Gecko 7.0开始, 将会使用"blob"作为Blob数据的文件名。

+ +

相关链接

+ + +
diff --git a/files/zh-cn/web/api/formdata/get/index.html b/files/zh-cn/web/api/formdata/get/index.html new file mode 100644 index 0000000000..4d8427e362 --- /dev/null +++ b/files/zh-cn/web/api/formdata/get/index.html @@ -0,0 +1,145 @@ +--- +title: FormData.get() +slug: Web/API/FormData/get +translation_of: Web/API/FormData/get +--- +

{{APIRef("XMLHttpRequest")}}

+ +

{{domxref("FormData")}}的get()方法用于返回FormData对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用{{domxref("FormData.getAll()","getAll()")}}方法。

+ +
+

注意: 该方法在Web Workers中有效。

+
+ +

语法

+ +
formData.get(name);
+ +

参数

+ +
+
name
+
将要获取值的键名。
+
+ +

返回值

+ +

包含值的{{domxref("FormDataEntryValue")}}。

+ +

例子

+ +

下面的代码创建一个FormData对象:

+ +
var formData = new FormData();
+ +

使用{{domxref("FormData.append")}}方法添加两个数据:

+ +
formData.append('username', 'Chris');
+formData.append('username', 'Bob');
+ +

接下来使用get()来回去第一个和"username"关联的值:

+ +
formData.get('username'); // Returns "Chris"
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}{{Spec2('XMLHttpRequest')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop('39.0')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop('39.0')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/getall/index.html b/files/zh-cn/web/api/formdata/getall/index.html new file mode 100644 index 0000000000..3a6ee8a53d --- /dev/null +++ b/files/zh-cn/web/api/formdata/getall/index.html @@ -0,0 +1,145 @@ +--- +title: FormData.getAll() +slug: Web/API/FormData/getAll +translation_of: Web/API/FormData/getAll +--- +

{{APIRef("XMLHttpRequest")}}

+ +

getAll()方法会返回该 {{domxref("FormData")}} 对象指定 key 的所有值。

+ +
+

注意： 该方法在 Web Workers 中可用。

+
+ +

语法

+ +
formData.getAll(name);
+ +

参数

+ +
+
name
+
一个 {{domxref("USVString")}} 表示要检索的 key 名称。
+
+ +

返回

+ +

一个 {{domxref("FormDataEntryValue")}} 数组。

+ +

示例

+ +

下列代码会先创建一个空的 FormData 对象：

+ +
var formData = new FormData();
+ +

使用 {{domxref("FormData.append")}} 添加两个 username 的值：

+ +
formData.append('username', 'Chris');
+formData.append('username', 'Bob');
+ +

下列 getAll() 方法会返回一个数组，包含了所有 username 的值：

+ +
formData.getAll('username'); // Returns ["Chris", "Bob"]
+ +

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}{{Spec2('XMLHttpRequest')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/has/index.html b/files/zh-cn/web/api/formdata/has/index.html new file mode 100644 index 0000000000..66b69c35c3 --- /dev/null +++ b/files/zh-cn/web/api/formdata/has/index.html @@ -0,0 +1,144 @@ +--- +title: FormData.has() +slug: Web/API/FormData/has +translation_of: Web/API/FormData/has +--- +

{{APIRef("XMLHttpRequest")}}

+ +

has()方法会返回一个布尔值，表示该{{domxref("FormData")}}对象是否含有某个key 。

+ +
+

注意: 该方法在 Web Workers 可用。

+
+ +

语法

+ +
formData.has(name);
+ +

参数

+ +
+
name
+
一个 {{domxref("USVString")}} ，要查询的 key 名称。
+
+ +

返回

+ +

一个 {{domxref("Boolean")}}。

+ +

示例

+ +

下列代码会先创建一个空的 formData 对象：

+ +
var formData = new FormData();
+ +

下列代码用来检测 FormData对象是否存在username这个key。默认检测一次，使用 {{domxref("FormData.append")}} 插入username之后再检测一次：

+ +
formData.has('username'); // Returns false
+formData.append('username', 'Chris');
+formData.has('username'); // Returns true
+
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}{{Spec2('XMLHttpRequest')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/index.html b/files/zh-cn/web/api/formdata/index.html new file mode 100644 index 0000000000..04968e5f52 --- /dev/null +++ b/files/zh-cn/web/api/formdata/index.html @@ -0,0 +1,81 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - FormData + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过{{domxref("XMLHttpRequest.send()")}} 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

+ +

如果你想构建一个简单的GET请求，并且通过{{HTMLElement("form")}}的形式带有查询参数，可以将它直接传递给{{domxref("URLSearchParams")}}。

+ +

实现了 FormData 接口的对象可以直接在{{jsxref("Statements/for...of", "for...of")}}结构中使用，而不需要调用{{domxref('FormData.entries()', 'entries()')}} : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。

+ +
+

注意：此特性可用于 Web Workers。

+
+ +

构造函数

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
创建一个新的 FormData 对象。
+
+ +

方法

+ +
+
{{domxref("FormData.append()")}}
+
向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。
+
{{domxref("FormData.delete()")}}
+
从 FormData 对象里面删除一个键值对。
+
{{domxref("FormData.entries()")}}
+
返回一个包含所有键值对的{{jsxref("Iteration_protocols","iterator")}}对象。
+
{{domxref("FormData.get()")}}
+
返回在 FormData 对象中与给定键关联的第一个值。
+
{{domxref("FormData.getAll()")}}
+
返回一个包含 FormData 对象中与给定键关联的所有值的数组。
+
{{domxref("FormData.has()")}}
+
返回一个布尔值表明 FormData 对象是否包含某些键。
+
{{domxref("FormData.keys()")}}
+
返回一个包含所有键的{{jsxref("Iteration_protocols","iterator")}}对象。
+
{{domxref("FormData.set()")}}
+
给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。
+
{{domxref("FormData.values()")}}
+
返回一个包含所有值的{{jsxref("Iteration_protocols","iterator")}}对象。
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData defined in XHR spec
+ +

浏览器兼容性

+ + + +

{{Compat("api.FormData")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/formdata/keys/index.html b/files/zh-cn/web/api/formdata/keys/index.html new file mode 100644 index 0000000000..dc9f30d549 --- /dev/null +++ b/files/zh-cn/web/api/formdata/keys/index.html @@ -0,0 +1,138 @@ +--- +title: FormData.keys() +slug: Web/API/FormData/keys +translation_of: Web/API/FormData/keys +--- +

{{APIRef("XMLHttpRequest")}}

+ +

FormData.keys() 该方法返回一个迭代器（{{jsxref("Iteration_protocols",'iterator')}}），遍历了该 formData  包含的所有key ，这些 key 是 {{domxref("USVString")}} 对象。

+ +
+

注意: 该方法在 Web Workers 可用。

+
+ +

语法

+ +
formData.keys();
+ +

返回值

+ +

返回一个迭代器（ {{jsxref("Iteration_protocols","iterator")}}）。

+ +

示例

+ +
// 先创建一个 FormData 对象
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// 输出所有的 key
+for (var key of formData.keys()) {
+   console.log(key);
+}
+
+ +

结果如下：

+ +
key1
+key2
+ +

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
Available in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatGeckoMobile(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatGeckoMobile(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(50.0)}}
+
+ +

 

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/set/index.html b/files/zh-cn/web/api/formdata/set/index.html new file mode 100644 index 0000000000..e07fc46185 --- /dev/null +++ b/files/zh-cn/web/api/formdata/set/index.html @@ -0,0 +1,152 @@ +--- +title: FormData.set() +slug: Web/API/FormData/set +translation_of: Web/API/FormData/set +--- +

{{APIRef("XMLHttpRequest")}}

+ +

set() 方法会对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。

+ +

set() 和 {{domxref("FormData.append")}} 不同之处在于：如果某个 key 已经存在，set() 会直接覆盖所有该 key 对应的值，而 {{domxref("FormData.append")}} 则是在该 key 的最后位置再追加一个值。

+ +
+

注意: 该方法在 Web Workers 可用。

+
+ +

语法

+ +

该方法有两种使用方式，一个是传入两个参数，一个是传入三个参数。

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

参数

+ +
+
name
+
字段名称。
+
value
+
字段的值，如果是传入两个参数的方式，那么该值是一个 {{domxref("USVString")}}，如果不是，将被转成一个字符串。如果是传入三个参数的方式，那么该值将是一个布尔值（{{domxref("Blob")}}），文件（{{domxref("File")}}），或者一个 {{domxref("USVString")}}，如果不是，将被转成一个字符串。
+
filename {{optional_inline}}
+
当第二个参数传递的是一个blob对象（{{domxref("Blob")}}）或者file对象（{{domxref("File")}}），filename参数就代表传给服务端的文件名（一个{{domxref("USVString")}}）。{{domxref("Blob")}} 对象的默认文件名是 "blob"。
+
+ +
+

注意: 如果对 FormData 对象插入一个blob对象（ {{domxref("Blob")}}），那么发送给服务器的请求头部（header） 里的 “Content-Disposition” 里的文件名称将会根据浏览器的不同而不同。

+
+ +

示例

+ +

先创建一个空的 FormData 对象：

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

使用 {{domxref("FormData.set")}} 设置键/值 ：

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

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}{{Spec2('XMLHttpRequest')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Available in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatNo}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

 

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/using_formdata_objects/index.html b/files/zh-cn/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..630c47068f --- /dev/null +++ b/files/zh-cn/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,149 @@ +--- +title: FormData 对象的使用 +slug: Web/API/FormData/Using_FormData_Objects +tags: + - AJAX + - Blob + - File + - FormData + - Forms + - XHR + - XMLHttpRequest +translation_of: Web/API/FormData/Using_FormData_Objects +--- +

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的{{domxref("HTMLFormElement.submit","submit()")}}方法来发送数据，从而，发送数据具有同样形式。

+ +

从零开始创建FormData对象

+ +

你可以自己创建一个FormData对象，然后调用它的{{domxref("FormData.append","append()")}}方法来添加字段，像这样：

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"
+
+// HTML 文件类型input，由用户选择
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript file-like 对象
+var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
注意：字段 "userfile" 和 "webmasterfile"  都包含一个文件. 字段 "accountnum" 是数字类型，它将被FormData.append()方法转换成字符串类型(FormData 对象的字段类型可以是 {{ domxref("Blob") }}, {{ domxref("File") }}, 或者 string: 如果它的字段类型不是Blob也不是File，则会被转换成字符串类)。
+ +

上面的示例创建了一个FormData实例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段，然后使用XMLHttpRequest的send()方法发送表单数据。字段 "webmasterfile" 是 {{domxref("Blob")}}类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。

+ +

通过HTML表单创建FormData对象

+ +

想要构造一个包含Form表单数据的FormData对象，需要在创建FormData对象时指定表单的元素。

+ +
+

注意：FormData将仅使用具有name属性的输入字段。

+
+ +
var formData = new FormData(someFormElement);
+
+ +

示例：

+ +
var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前，附加额外的数据到FormData对象里，像这样：

+ +
var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里。

+ +

使用FormData对象上传文件

+ +

你还可以使用FormData上传文件。使用的时候需要在表单中添加一个文件类型的input：

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div></div>
+
+ +

然后使用下面的代码发送请求：

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

注意：如果FormData对象是通过表单创建的，则表单中指定的请求方式会被应用到方法open()中 。

+
+ +

你还可以直接向FormData对象附加File或Blob类型的文件，如下所示：

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

使用append()方法时，可以通过第三个可选参数设置发送请求的头 Content-Disposition 指定文件名。如果不指定文件名（或者不支持该参数时），将使用名字“blob”。

+ +

如果你设置正确的配置项，你也可以通过jQuery来使用FormData对象：

+ +
var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // 不处理数据
+  contentType: false   // 不设置内容类型
+});
+
+ +

不使用FormData对象,通过AJAX提交表单和上传文件

+ +

如果你想知道不使用FormData对象的情况下，通过AJAX序列化和提交表单 请点击这里。

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/formdata/values/index.html b/files/zh-cn/web/api/formdata/values/index.html new file mode 100644 index 0000000000..434bdcf6ec --- /dev/null +++ b/files/zh-cn/web/api/formdata/values/index.html @@ -0,0 +1,141 @@ +--- +title: FormData.values() +slug: Web/API/FormData/values +translation_of: Web/API/FormData/values +--- +

{{APIRef("XMLHttpRequest")}}

+ +

FormData.values() 方法返回一个允许遍历该对象中所有值的 {{jsxref("Iteration_protocols",'迭代器')}} 。这些值是 {{domxref("USVString")}} 或是{{domxref("Blob")}} 对象。

+ +
+

注意： 此方法在 Web Workers 中可用

+
+ +

语法

+ +
formData.values();
+ +

返回值

+ +

返回一个{{jsxref("Iteration_protocols","迭代器")}}.

+ +

示例

+ +
//创建一个FormData测试对象
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+//显示值
+for (var value of formData.values()) {
+   console.log(value);
+}
+
+ +

结果为：

+ +
value1
+value2
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatChrome(50.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Andorid
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatGeckoMobile(44)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}     {{CompatChrome(50.0)}}
+
+ +

 

+ +

相关链接

+ + diff --git "a/files/zh-cn/web/api/formdata/\345\210\240\351\231\244/index.html" "b/files/zh-cn/web/api/formdata/\345\210\240\351\231\244/index.html" new file mode 100644 index 0000000000..9d38b4e20a --- /dev/null +++ "b/files/zh-cn/web/api/formdata/\345\210\240\351\231\244/index.html" @@ -0,0 +1,71 @@ +--- +title: FormData.delete() +slug: Web/API/FormData/删除 +tags: + - 删除 +translation_of: Web/API/FormData/delete +--- +

{{APIRef("XMLHttpRequest")}}

+ +

{{domxref("FormData")}} 接口的 delete() 方法会从 FormData 对象中删除指定键，即 key，和它对应的值，即 value。

+ +
+

Note: 此方法可用于 Web Workers。

+
+ +

语法

+ +
formData.delete(name);
+ +

参数

+ +
+
name
+
要删除的键（Key）的名字。
+
+ +

返回

+ +

空。

+ +

例子

+ +

以下代码将会创建一个空的 FormData 对象， 并且从指定的表单中获取键值对：

+ +
var formData = new FormData(myForm);
+ +

你可以通过 delete() 方法来删除键值对：

+ +
formData.delete('username');
+ +

规范

+ + + + + + + + + + + + + + +
说明状态备注
{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}{{Spec2('XMLHttpRequest')}} 
+ +

浏览器兼容性

+ + + +

{{Compat("api.FormData.delete")}}

+ +

参见

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