FormData

  • Revision slug: DOM/XMLHttpRequest/FormData
  • Revision title: FormData
  • Revision id: 12865
  • Created:
  • Creator: cgack
  • Is current revision? No
  • Comment 2 words added

Revision Content

XMLHttpRequest Level 2 adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.

It uses the same format a form would use if the encoding type were set to "multipart/form-data".

For details on how to use the FormData object, see Using FormData objects.

Syntax

new FormData ([in HTMLFormElement form])

Parameters

form
(optional) HTML Form Element <form> to send for keys/values. It will also encode file input content.

 

Method overview

void append(in DOMString name, in {{ interface("nsIVariant") }} value);

Methods

append()

Appends a key/value pair to the FormData object.

void append(
  in DOMString name,
  in nsIVariant value
); 
Parameters
name
The name of the field whose data is contained in value.
value
The field's value. Can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string, if neither, the value is converted to a string.
Notes

If you specify a {{ domxref("Blob") }} as the data to append to the FormData object, the filename that will be reported to the server in the "Content-Disposition" header will vary from browser to browser. See the {{ anch("Browser compatibility") }} section for details.

See also

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 7+ {{ CompatGeckoDesktop("2.0") }} 10+ {{ CompatUnknown() }} 5+
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko notes

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.

{{ languages( { "en": "en/DOM/XMLHttpRequest/FormData", "ja": "ja/DOM/XMLHttpRequest/FormData" } ) }}

Revision Source

<p>XMLHttpRequest Level 2 adds support for the new <code>FormData</code> interface. <code>FormData</code> objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> method.</p>
<p>It uses the same format a form would use if the encoding type were set to "multipart/form-data".</p>
<p>For details on how to use the <code>FormData</code> object, see <a href="/en/DOM/XMLHttpRequest/FormData/Using_FormData_objects" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a>.</p>
<h2 name="Syntax">Syntax</h2>
<p><code>new FormData ([in </code><code>HTMLFormElement form</code><code>])</code></p>
<h2 name="Parameters">Parameters</h2>
<dl> <dt><code>form</code></dt> <dd>(optional) HTML Form Element &lt;form&gt; to send for keys/values. It will also encode file input content.</dd>
</dl>
<p> </p>
<h2 name="Method_overview">Method overview</h2>
<table class="standard-table"> <tbody> <tr> <td><code>void <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/DOM/XMLHttpRequest/FormData#append()">append</a>(in DOMString name, in {{ interface("nsIVariant") }} value);</code></td> </tr> </tbody>
</table>
<h2>Methods</h2>
<h3>append()</h3>
<p>Appends a key/value pair to the <code>FormData</code> object.</p>
<pre>void append(
  in DOMString name,
  in nsIVariant value
); 
</pre>
<h6>Parameters</h6>
<dl> <dt><code>name</code></dt> <dd>The name of the field whose data is contained in <code>value</code>.</dd> <dt><code>value</code></dt> <dd>The field's value. Can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string, if neither, the value is converted to a string.</dd>
</dl>
<h6>Notes</h6>
<p>If you specify a {{ domxref("Blob") }} as the data to append to the <code>FormData</code> object, the filename that will be reported to the server in the "Content-Disposition" header will vary from browser to browser. See the {{ anch("Browser compatibility") }} section for details.</p>
<h2>See also</h2>
<ul> <li><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest<br> </a></li> <li><a href="/en/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> <li><a href="/en/HTML/Element/form" title="en/HTML/Element/form"><code>form</code></a></li> <li><a class=" external" href="http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata" title="http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata"><code>W3C Specification</code></a></li>
</ul><h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<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>{{ CompatUnknown() }}</td> <td>5+</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>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>{{ CompatGeckoMobile("2.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Gecko notes</h3>
<p>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>{{ languages( { "en": "en/DOM/XMLHttpRequest/FormData", "ja": "ja/DOM/XMLHttpRequest/FormData" } ) }}</p>
Revert to this revision