The FormData()
constructor creates a new FormData
object.
Note: This feature is available in Web Workers.
Syntax
var formData = new FormData(
form
)
Parameters
form
Optional- An HTML
<form>
element — when specified, theFormData
object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.
Example
The following line creates an empty FormData
object:
var formData = new FormData(); // Currently empty
You could add a key/value pair to this using FormData.append
:
formData.append('username', 'Chris');
Or you can specify the optional form
argument when creating the FormData
object, to prepopulate it with values from the specified form:
<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>
Note: All input elements have a 'name' attribute. It is necessary to be able to access their values later.
var myForm = document.getElementById('myForm'); formData = new FormData(myForm);
Specifications
Specification | Status | Comment |
---|---|---|
XMLHttpRequest The definition of 'FormData()' in that specification. |
Living Standard | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 7 | 4.0 (2.0) | 10 | 12 | 5 |
append with filename | (Yes) | 22.0 (22.0) | ? | ? | ? |
available in web workers | (Yes) | 39.0 (39.0) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 3.0 | ? | 4.0 (2.0) | ? |
12 |
? |
append with filename | ? | ? | 22.0 (22.0) | ? | ? | ? |
Available in web workers | ? | ? | 39.0 (39.0) | ? | ? | ? |
Note: XHR in Android 4.0 sends empty content for FormData with blob.
Gecko notes
Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), if you specified a 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.