1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
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>
|
