diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/formdata | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/formdata')
-rw-r--r-- | files/zh-cn/web/api/formdata/append/index.html | 180 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/entries/index.html | 141 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/formdata/index.html | 184 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/get/index.html | 145 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/getall/index.html | 145 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/has/index.html | 144 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/index.html | 81 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/keys/index.html | 138 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/set/index.html | 152 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/using_formdata_objects/index.html | 149 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/values/index.html | 141 | ||||
-rw-r--r-- | files/zh-cn/web/api/formdata/删除/index.html | 71 |
12 files changed, 1671 insertions, 0 deletions
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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>{{domxref("FormData")}} 接口的<code><strong>append()</strong></code> 方法 会添加一个新值到 <code>FormData</code> 对象内的一个已存在的键中,如果键不存在则会添加该键。</p> + +<p>{{domxref("FormData.set")}} 和 <code>append()</code> 的区别在于,如果指定的键已经存在, {{domxref("FormData.set")}} 会使用新值覆盖已有的值,而 <code>append()</code> 会把新值添加到已有值集合的后面。</p> + +<div class="note"> +<p><strong>提示</strong>: 这个方法在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 中可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<p>这个方法有两个版本:一个有两个参数的版本和一个有三个参数的版本。</p> + +<pre class="brush: js">formData.append(name, value); +formData.append(name, value, filename);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">参数</h3> + +<dl> + <dt><code>name</code></dt> + <dd><code>value中包含的数据对应的表单名称。</code></dd> + <dt><code>value</code></dt> + <dd><code>表单的值。</code>可以是{{domxref("USVString")}} 或 {{domxref("Blob")}} (包括子类型,如 {{domxref("File")}})。</dd> + <dt><code>filename </code>{{optional_inline}}</dt> + <dd>传给服务器的文件名称 (一个 {{domxref("USVString")}}), 当一个 {{domxref("Blob")}} 或 {{domxref("File")}} 被作为第二个参数的时候, {{domxref("Blob")}} 对象的默认文件名是 "blob"。 {{domxref("File")}} 对象的默认文件名是该文件的名称。</dd> +</dl> + +<div class="note"> +<p><strong>注意:</strong> 如果你指定一个 {{domxref("Blob")}} 作为数据添加到 <code>FormData</code> 对象中, 文件名会被放在 "Content-Disposition" 头部(常常会根据浏览器变化而变化)传给服务器。</p> +</div> + +<h3 id="返回值">返回值</h3> + +<p>空</p> + +<h2 id="示例">示例</h2> + +<p><code>下面的代码创建了一个空的 FormData</code> 对象:</p> + +<pre class="brush: js">var formData = new FormData(); // Currently empty</pre> + +<p>你可以通过 {{domxref("FormData.append")}} 往对象里加入键值对:</p> + +<pre class="brush: js">formData.append('username', 'Chris'); +formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre> + +<p>跟常规<code>表单数据一样,你可以使用同一个名称添加多个值</code> 。例如 (为了与PHP命名习惯一致在名称中添加了[]):</p> + +<pre class="brush: js">formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg'); +formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');</pre> + +<p>这项技术使得多文件上传的处理更加简单,因为所得数据结构更有利于循环。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基础支持</td> + <td>7</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td> + <td>10</td> + <td>12</td> + <td>5</td> + </tr> + <tr> + <td>支持filename参数</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>在web workers中可用</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基础支持</td> + <td>3.0<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td> + <td>1.0.1</td> + <td>{{CompatUnknown}}</td> + <td> + <p>12</p> + </td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>支持filename参数</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>在web workers中可用</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[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.</p> + +<p>[2] XHR in Android 4.0 sends empty content for FormData with blob.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>The <code><strong>FormData.entries()</strong></code> 方法返回一个 {{jsxref("Iteration_protocols",'iterator')}}对象 ,此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 {{domxref("USVString")}} 对象;value是一个 {{domxref("USVString")}} , 或者 {{domxref("Blob")}}对象。</p> + +<div class="note"> +<p><strong>Note</strong>: 此方法在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 可用.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">formData.entries();</pre> + +<h3 id="返回值">返回值</h3> + +<p>返回 {{jsxref("Iteration_protocols","iterator")}}。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js;highlight:[7]">// 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]); +} +</pre> + +<p>执行结果为:</p> + +<pre>key1, value1 +key2, value2</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData()</strong></code>构造函数用于创建一个新的{{domxref("FormData")}}对象。</p> + +<div class="note"> +<p><strong>注意</strong>: 该功能在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 中可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<dl> + <dt><code>form </code>{{optional_inline}}</dt> + <dd>一个HTML 上的{{HTMLElement("form")}}表单元素——当指定了,这种方式创建的{{domxref("FormData")}}对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>下面的代码将创建一个空的FormData对象:</p> + +<pre class="brush: js">var formData = new FormData(); // 当前为空</pre> + +<p>你可以使用{{domxref("FormData.append")}}来添加键/值对到表单里面;</p> + +<pre class="brush: js">formData.append('username', 'Chris'); +</pre> + +<p>或者你可以使用可选的<code><em>form参数来创建一个带预置数据的FormData对象</em></code>:</p> + +<pre class="brush: html"><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> +</pre> + +<div class="note"> +<p><strong>注意</strong>: 所有的输入元素都需要有<strong>name</strong>属性,否则无法访问到值。</p> +</div> + +<pre class="brush: js">var myForm = document.getElementById('myForm'); +formData = new FormData(myForm);</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>12</td> + <td>5</td> + </tr> + <tr> + <td>append with filename</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>available in web workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>12</p> + </td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>append with filename</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("39.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<div class="note"> +<p><strong>注意</strong>: XHR在Android 4.0上FormData的blob数据将发送空内容。</p> +</div> + +<h2 id="附注">附注</h2> + +<p>在Gecko 7.0 {{geckoRelease("7.0")}}之前, 如果你将{{domxref("Blob")}}作为数据添加到form对象中,文件名就是空的,这可能导致服务器在HTTP头的Content-Disposition中设置的文件名为空而引起错误。 从Gecko 7.0开始, 将会使用"blob"作为Blob数据的文件名。</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> +</div> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>{{domxref("FormData")}}的<code><strong>get()</strong>方法用于返回FormData对象中和指定的键关联的第一个值,如果你想要返回和指定键关联的全部值,那么可以使用</code>{{domxref("FormData.getAll()","getAll()")}}方法。</p> + +<div class="note"> +<p><strong>注意</strong>: 该方法在<a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>中有效。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">formData.get(name);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">参数</h3> + +<dl> + <dt><code>name</code></dt> + <dd>将要获取值的键名。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>包含值的{{domxref("FormDataEntryValue")}}。</p> + +<h2 id="例子">例子</h2> + +<p>下面的代码创建一个FormData对象:</p> + +<pre class="brush: js">var formData = new FormData();</pre> + +<p>使用{{domxref("FormData.append")}}方法添加两个数据:</p> + +<pre class="brush: js">formData.append('username', 'Chris'); +formData.append('username', 'Bob');</pre> + +<p><code><font face="Open Sans, Arial, sans-serif">接下来使用</font>get()来回去第一个和"username"关联的值</code>:</p> + +<pre class="brush: js">formData.get('username'); // Returns "Chris"</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop('39.0')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop('39.0')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>getAll()</strong></code>方法会返回该 {{domxref("FormData")}} 对象指定 key 的所有值。</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注意:</strong></span> 该方法在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 中可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">formData.getAll(name);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">参数</h3> + +<dl> + <dt><code>name</code></dt> + <dd>一个 {{domxref("USVString")}} 表示要检索的 key 名称。</dd> +</dl> + +<h3 id="返回">返回</h3> + +<p>一个 {{domxref("FormDataEntryValue")}} 数组。</p> + +<h2 id="示例">示例</h2> + +<p>下列代码会先创建一个空的 <code>FormData</code> 对象:</p> + +<pre class="brush: js">var formData = new FormData();</pre> + +<p>使用 {{domxref("FormData.append")}} 添加两个 <code>username 的值:</code></p> + +<pre class="brush: js">formData.append('username', 'Chris'); +formData.append('username', 'Bob');</pre> + +<p>下列 <code>getAll()</code> 方法会返回一个数组,包含了所有 <code>username</code> 的值:</p> + +<pre class="brush: js">formData.getAll('username'); // Returns ["Chris", "Bob"]</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">使用 XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">使用 FormData 对象</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>has()</strong></code>方法会返回一个布尔值,表示该{{domxref("FormData")}}对象是否含有某个key 。</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注意</strong></span>: 该方法在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">formData.has(name);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">参数</h3> + +<dl> + <dt><code>name</code></dt> + <dd>一个 {{domxref("USVString")}} ,要查询的 key 名称。</dd> +</dl> + +<h3 id="返回">返回</h3> + +<p>一个 {{domxref("Boolean")}}。</p> + +<h2 id="示例">示例</h2> + +<p>下列代码会先创建一个空的 formData 对象:</p> + +<pre class="brush: js">var formData = new FormData();</pre> + +<p>下列代码用来检测 <code>FormData对象是否存在</code><code>username这个key。默认检测一次,使用 </code>{{domxref("FormData.append")}} 插入<code>username之后再检测一次:</code></p> + +<pre class="brush: js">formData.has('username'); // Returns false +formData.append('username', 'Chris'); +formData.has('username'); // Returns true + +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><strong><code>FormData</code></strong> 接口提供了一种表示表单数据的键值对 <code>key/value</code> 的构造方式,并且可以轻松的将数据通过{{domxref("XMLHttpRequest.send()")}} 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 <code>"multipart/form-data"</code>,它会使用和表单一样的格式。</p> + +<p>如果你想构建一个简单的<code>GET</code>请求,并且通过{{HTMLElement("form")}}的形式带有查询参数,可以将它直接传递给{{domxref("URLSearchParams")}}。</p> + +<p>实现了 <code>FormData</code> 接口的对象可以直接在{{jsxref("Statements/for...of", "for...of")}}结构中使用,而不需要调用{{domxref('FormData.entries()', 'entries()')}} : <code>for (var p of myFormData)</code> 的作用和 <code>for (var p of myFormData.entries())</code> 是相同的。</p> + +<div class="note"> +<p><strong>注意</strong>:此特性可用于 <a href="/zh-CN/docs/Web/API/Web_Workers_API">Web Workers</a>。</p> +</div> + +<h2 id="构造函数">构造函数</h2> + +<dl> + <dt>{{domxref("FormData.FormData","FormData()")}}</dt> + <dd>创建一个新的 <code>FormData</code> 对象。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{domxref("FormData.append()")}}</dt> + <dd>向 <code>FormData</code> 中添加新的属性值,<code>FormData</code> 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。</dd> + <dt>{{domxref("FormData.delete()")}}</dt> + <dd>从 FormData 对象里面删除一个键值对。</dd> + <dt>{{domxref("FormData.entries()")}}</dt> + <dd>返回一个包含所有键值对的{{jsxref("Iteration_protocols","iterator")}}对象。</dd> + <dt>{{domxref("FormData.get()")}}</dt> + <dd><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">返回在 </span></font>FormData</code> 对象中与给定键关联的第一个值。</dd> + <dt>{{domxref("FormData.getAll()")}}</dt> + <dd>返回一个包含 <code>FormData</code> 对象中与给定键关联的所有值的数组。</dd> + <dt>{{domxref("FormData.has()")}}</dt> + <dd><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">返回一个布尔值表明 </span></font>FormData</code> 对象是否包含某些键。</dd> + <dt>{{domxref("FormData.keys()")}}</dt> + <dd>返回一个包含所有键的{{jsxref("Iteration_protocols","iterator")}}对象。</dd> + <dt>{{domxref("FormData.set()")}}</dt> + <dd>给 <code>FormData</code> 设置属性值,如果<code>FormData</code> 对应的属性值存在则覆盖原值,否则新增一项属性值。</dd> + <dt>{{domxref("FormData.values()")}}</dt> + <dd>返回一个包含所有值的{{jsxref("Iteration_protocols","iterator")}}对象。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>FormData defined in XHR spec</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.FormData")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/API/FormData/Using_FormData_Objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData.keys()</strong></code> 该方法返回一个迭代器({{jsxref("Iteration_protocols",'iterator')}}),遍历了该 formData 包含的所有key ,这些 key 是 {{domxref("USVString")}} 对象。</p> + +<div class="note"> +<p><strong>注意</strong>: 该方法在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">formData.keys();</pre> + +<h3 id="返回值">返回值</h3> + +<p>返回一个迭代器( {{jsxref("Iteration_protocols","iterator")}})。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js;highlight:[7]">// 先创建一个 FormData 对象 +var formData = new FormData(); +formData.append('key1', 'value1'); +formData.append('key2', 'value2'); + +// 输出所有的 key +for (var key of formData.keys()) { + console.log(key); +} +</pre> + +<p>结果如下:</p> + +<pre>key1 +key2</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>set()</strong></code> 方法会对 <code>FormData</code> <code>对象里的某个</code> <code>key</code> <code>设置一个新的值,如果该</code> <code>key</code> <code>不存在,则添加。</code></p> + +<p><code>set()</code> 和 {{domxref("FormData.append")}} 不同之处在于:如果某个 key 已经存在,<code>set()</code> 会直接覆盖所有该 key 对应的值,而 {{domxref("FormData.append")}} 则是在该 key 的最后位置再追加一个值。</p> + +<div class="note"> +<p><strong>注意</strong>: 该方法在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<p>该方法有两种使用方式,一个是传入两个参数,一个是传入三个参数。</p> + +<pre class="brush: js">formData.set(name, value); +formData.set(name, value, filename);</pre> + +<h4 id="append()_Parameters" name="append()_Parameters">参数</h4> + +<dl> + <dt><code>name</code></dt> + <dd>字段名称。</dd> + <dt><code>value</code></dt> + <dd>字段的值,如果是传入两个参数的方式,那么该值是一个 {{domxref("USVString")}},如果不是,将被转成一个字符串。如果是传入三个参数的方式,那么该值将是一个布尔值({{domxref("Blob")}}),文件({{domxref("File")}}),或者一个 {{domxref("USVString")}},如果不是,将被转成一个字符串。</dd> + <dt><code>filename </code>{{optional_inline}}</dt> + <dd>当第二个参数传递的是一个blob对象({{domxref("Blob")}})或者file对象({{domxref("File")}}),filename参数就代表传给服务端的文件名(一个{{domxref("USVString")}})。{{domxref("Blob")}} 对象的默认文件名是 "blob"。</dd> +</dl> + +<div class="note"> +<p><strong>注意:</strong> 如果对 FormData 对象插入一个blob对象( {{domxref("Blob")}}),那么发送给服务器的请求头部(header) 里的 “Content-Disposition” 里的文件名称将会根据浏览器的不同而不同。</p> +</div> + +<h2 id="示例">示例</h2> + +<p>先创建一个空的 <code>FormData</code> <code>对象:</code></p> + +<pre class="brush: js">var formData = new FormData(); // Currently empty</pre> + +<p>使用 {{domxref("FormData.set")}} 设置键/值 :</p> + +<pre class="brush: js">formData.set('username', 'Chris'); +formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatNo}}</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p class="summary">FormData对象用以将数据编译成键值对,以便用<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单<code>enctype</code>属性设为<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">multipart/form-data</span></font> ,则会使用表单的{{domxref("HTMLFormElement.submit","submit()")}}方法来发送数据,从而,发送数据具有同样形式。</p> + +<h2 id="从零开始创建FormData对象">从零开始创建FormData对象</h2> + +<p>你可以自己创建一个<code>FormData</code>对象,然后调用它的{{domxref("FormData.append","append()")}}方法来添加字段,像这样:</p> + +<pre class="brush: js notranslate">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); +</pre> + +<div class="note"><strong>注意:</strong>字段 "userfile" 和 "webmasterfile" 都包含一个文件. 字段 "accountnum" 是数字类型,它将被<code><a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()">FormData.append()</a></code>方法转换成字符串类型(<code><a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()">FormData</a></code> 对象的字段类型可以是 {{ domxref("Blob") }}, {{ domxref("File") }}, 或者 string: <strong>如果它的字段类型不是Blob也不是File,则会被转换成字符串类)。</strong></div> + +<p>上面的示例创建了一个<code><a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()">FormData</a></code>实例,包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段,然后使用<code>XMLHttpRequest</code>的<a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a>方法发送表单数据。字段 "webmasterfile" 是 {{domxref("Blob")}}类型。一个 <strong>Blob</strong>对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/File" title="File 接口提供了文件的信息,以及文件内容的存取方法。"><code>File</code></a> 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob" title="Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。"><code>Blob()</code></a> 构造函数创建一个Blob对象。</p> + +<h2 id="通过HTML表单创建FormData对象">通过HTML表单创建FormData对象</h2> + +<p>想要构造一个包含Form表单数据的FormData对象,需要在创建FormData对象时指定表单的元素。</p> + +<div class="blockIndicator note"> +<p><strong>注意:</strong>FormData将仅使用具有name属性的输入字段。</p> +</div> + +<pre class="brush: js notranslate">var formData = new FormData(someFormElement); +</pre> + +<p>示例:</p> + +<pre class="brush: js notranslate">var formElement = document.querySelector("form"); +var request = new XMLHttpRequest(); +request.open("POST", "submitform.php"); +request.send(new FormData(formElement)); +</pre> + +<p>你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前,附加额外的数据到FormData对象里,像这样:</p> + +<pre class="brush: js notranslate">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);</pre> + +<p>这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里。</p> + +<h2 id="使用FormData对象上传文件">使用FormData对象上传文件</h2> + +<p>你还可以使用FormData上传文件。使用的时候需要在表单中添加一个文件类型的input:</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<p>然后使用下面的代码发送请求:</p> + +<pre class="brush: js notranslate">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); +</pre> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注意:</strong></span>如果FormData对象是通过表单创建的,则表单中指定的请求方式会被应用到方法open()中 。</p> +</div> + +<p>你还可以直接向FormData对象附加File或Blob类型的文件,如下所示:</p> + +<pre class="brush: js notranslate">data.append("myfile", myBlob, "filename.txt"); +</pre> + +<p>使用append()方法时,可以通过第三个可选参数设置发送请求的头 <code>Content-Disposition </code>指定文件名。如果不指定文件名(或者不支持该参数时),将使用名字“blob”。</p> + +<p>如果你设置正确的配置项,你也可以通过jQuery来使用FormData对象:</p> + +<pre class="brush: js notranslate">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 // 不设置内容类型 +}); +</pre> + +<h2 id="不使用FormData对象通过AJAX提交表单和上传文件">不使用FormData对象,通过AJAX提交表单和上传文件</h2> + +<p>如果你想知道不使用FormData对象的情况下,通过<a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a>序列化和提交表单 <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">请点击这里</a>。</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("Blob")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData.values()</strong></code> 方法返回一个允许遍历该对象中所有值的 {{jsxref("Iteration_protocols",'迭代器')}} 。这些值是 {{domxref("USVString")}} 或是{{domxref("Blob")}} 对象。</p> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>注意:</strong></span> 此方法在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 中可用</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">formData.values();</pre> + +<h3 id="返回值">返回值</h3> + +<p>返回一个{{jsxref("Iteration_protocols","迭代器")}}.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js;highlight:[7]">//创建一个FormData测试对象 +var formData = new FormData(); +formData.append('key1', 'value1'); +formData.append('key2', 'value2'); + +//显示值 +for (var value of formData.values()) { + console.log(value); +} +</pre> + +<p>结果为:</p> + +<pre>value1 +value2</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Andorid</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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..9d38b4e20a --- /dev/null +++ b/files/zh-cn/web/api/formdata/删除/index.html @@ -0,0 +1,71 @@ +--- +title: FormData.delete() +slug: Web/API/FormData/删除 +tags: + - 删除 +translation_of: Web/API/FormData/delete +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>{{domxref("FormData")}} 接口的 <code><strong>delete()</strong></code> 方法会从 <code>FormData</code> 对象中删除指定键,即 key,和它对应的值,即 value。</p> + +<div class="note"> +<p><strong>Note</strong>: 此方法可用于 <a href="/zh-CN/docs/Web/API/Web_Workers_API">Web Workers</a>。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">formData.delete(name);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>name</code></dt> + <dd>要删除的键(Key)的名字。</dd> +</dl> + +<h3 id="返回">返回</h3> + +<p>空。</p> + +<h2 id="例子">例子</h2> + +<p>以下代码将会创建一个空的 <code>FormData</code> 对象, 并且从指定的表单中获取键值对:</p> + +<pre class="brush: js">var formData = new FormData(myForm);</pre> + +<p>你可以通过 <code>delete()</code> 方法来删除键值对:</p> + +<pre class="brush: js">formData.delete('username');</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">说明</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.FormData.delete")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> |