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
|
---
title: FormData.append()
slug: Web/API/FormData/append
translation_of: Web/API/FormData/append
---
<p>{{APIRef("XMLHttpRequest")}}</p>
<p>O método <code><strong>append()</strong></code> da Interface {{domxref("FormData")}} adiciona um novo valor dentro de uma chave existente dentro do objeto <code>FormData </code>ou adiciona a chave caso ainda não exista.</p>
<p>A diferença entre {{domxref("FormData.set")}} e <code>append()</code> é que se uma chave específica já exista, {{domxref("FormData.set")}} irá substituir o valor existente com um novo valor, já o <code>append()</code> irá adicionar um novo valor no fim do conjunto de valores.</p>
<div class="note">
<p><strong>Nota</strong>: Este metodo esta desponivel no <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<p>Existe duas versoes deste metodo: um de dois e um outro de tres:</p>
<pre class="brush: js">formData.append(name, value);
formData.append(name, value, filename);</pre>
<h3 id="append()_Parameters" name="append()_Parameters">Parametros</h3>
<dl>
<dt><code>name</code></dt>
<dd>O nome do campo cujos dados estão contidas em value.</dd>
<dt><code>value</code></dt>
<dd>O valor deste campo . Nas duas versões este é a {{domxref("USVString")}}, ou caso não seja , este é convertido em string. Na versão de tres parametros este pode ser {{domxref("Blob")}}, {{domxref("File")}}, ou {{domxref("USVString")}}, de novo, caso nenhum deses forem especificados este valor é convertido em uma string.</dd>
<dt><code>filename </code>{{optional_inline}}</dt>
<dd>O filename reporta para o servidor (a {{domxref("USVString")}}), quando a {{domxref("Blob")}} ou {{domxref("File")}} é passado como o segundo parametro. O default filename para {{domxref("Blob")}} o objecto é "blob".</dd>
</dl>
<div class="note">
<p><strong>Nota:</strong> Se espisificares {{domxref("Blob")}} como a data append para o objecto <code>FormData</code> , o filename a ser reportado para o servidor no "Content-Disposition" header usado para mudar de browser em browser.</p>
</div>
<h3 id="Retorna">Retorna</h3>
<p>Void.</p>
<h2 id="Exemplo">Exemplo</h2>
<p>As seguintes linhas criam um Objecto <code>FormData</code> vazio:</p>
<pre class="brush: js">var formData = new FormData(); // Corrente vazio</pre>
<p>Podes adicionar chaves/valores pares para usar (domxref("FormData.append")}}:</p>
<pre class="brush: js">formData.append('username', 'Chris');
formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Estato</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristicas</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte Basico</td>
<td>7+</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>10+</td>
<td>12+</td>
<td>5+</td>
</tr>
<tr>
<td>append com filename</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("22.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Disponivel para Desenvolvedores Web</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>Caracteristicas</th>
<th>Android</th>
<th>Chrome para 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>Basic support</td>
<td>3.0</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>1.0.1</td>
<td>{{CompatUnknown}}</td>
<td>
<p>12+</p>
</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>append com 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><span style="font-size: 12px; line-height: 18px;">Disponivel para Desenvolvedores Web</span></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>
<div class="note">
<p><strong>Nota</strong>: XHR em Android 4.0 envia conteudo vazio para FormData com blob.</p>
</div>
<h3 id="Notas_Gecko">Notas Gecko</h3>
<p>Antis do Gecko 7.0 {{geckoRelease("7.0")}}, se especificares {{domxref("Blob")}} como a conteudo a ser adicionado ao objecto, o filename reportado no "Content-Disposition" HTTP header era um string vazio; este resulta em erros sendo reportados por alguns servidores. Começando com Gecko 7.0, o filename "blob" é enviado.</p>
<h2 id="Veja_Tambem">Veja Tambem</h2>
<ul>
<li>{{domxref("XMLHTTPRequest")}}</li>
<li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Usando XMLHttpRequest</a></li>
<li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">UsandoFormData objects</a></li>
<li>{{HTMLElement("Form")}}</li>
</ul>
|
