Widely available Supported across all major browsers. Safe to use in production.

XMLHttpRequest

The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.send() or navigator.sendBeacon() methods. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

You can also pass it directly to the URLSearchParams constructor if you want to generate query parameters in the way a <form> would do if it were using simple GET submission.

An object implementing FormData can directly be used in a for...of structure, instead of entries(): for (const p of myFormData) is equivalent to for (const p of myFormData.entries()).

Networking

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`FormData`	5	12	4	5	18	5
`@@iterator` [Symbol.iterator]	50	18	44	11.1	50	11.3
`append` The append() method of the FormData interface appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.	5	12	4	5	18	5
`append (filename parameter)` `filename` parameter	16	12	22	6	18	6
`delete` The delete() method of the FormData interface deletes a key and its value(s) from a FormData object.	50	18	39	11.1	50	11.3
`entries` The FormData.entries() method returns an iterator which iterates through all key/value pairs contained in the FormData. The key of each pair is a string, and the value is either a string or a Blob.	50	18	44	11.1	50	11.3
`forEach`	50	18	47	11.1	50	11.3
`FormData` The FormData() constructor creates a new FormData object.	5	12	4	5	18	5
`FormData (submitter)` `submitter` parameter	112	112	111	16.4	112	16.4
`get` The get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the FormData.getAll() method instead.	50	18	39	11.1	50	11.3
`getAll` The getAll() method of the FormData interface returns all the values associated with a given key from within a FormData object.	50	18	39	11.1	50	11.3
`has` The has() method of the FormData interface returns whether a FormData object contains a certain key.	50	18	39	11.1	50	11.3
`keys` The FormData.keys() method returns an iterator which iterates through all keys contained in the FormData. The keys are strings.	50	18	44	11.1	50	11.3
`set` The set() method of the FormData interface sets a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist.	50	18	39	11.1	50	11.3
`values` The FormData.values() method returns an iterator which iterates through all values contained in the FormData. The values are strings or Blob objects.	50	18	44	11.1	50	11.3
`worker_support` Available in workers	50	79	39	13.1	50	13.4
`ProgressEvent` The ProgressEvent interface represents events that measure the progress of an underlying process, like an HTTP request (e.g., an XMLHttpRequest, or the loading of the underlying resource of an img, audio, video, style or link).	1	12	3.5	3.1	18	2
`lengthComputable` The ProgressEvent.lengthComputable read-only property is a boolean flag indicating if the resource concerned by the ProgressEvent has a length that can be calculated. If not, the ProgressEvent.total property has no significant value.	1	12	3.5	3.1	18	2
`loaded` The ProgressEvent.loaded read-only property is a number indicating the size of the data already transmitted or processed. The progress ratio can be calculated by dividing the value of this property by ProgressEvent.total.	1	12	3.5	3.1	18	2
`ProgressEvent` The ProgressEvent() constructor returns a new ProgressEvent object, representing the current completion of a long process.	16	14	18	6	18	6
`ProgressEvent (loaded total options accept double)` `loaded` and `total` options accept doubles	136	136	138	Preview	136
`total` The ProgressEvent.total read-only property is a number indicating the total size of the data being transmitted or processed.	1	12	3.5	3.1	18	2
`worker_support` Available in workers	47	79	54	10	47	10
`XMLHttpRequest` XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.	1	12	1	1.2	18	1
`abort` The XMLHttpRequest.abort() method aborts the request if it has already been sent. When a request is aborted, its XMLHttpRequest.readyState is changed to XMLHttpRequest.UNSENT (0) and the request's XMLHttpRequest.status code is set to 0.	1	12	1	1.2	18	1
`abort_event` The abort event is fired when a request has been aborted, for example because the program called XMLHttpRequest.abort().	1	12	3.5	1.3	18	1
`authorization_removed_cross_origin` `Authorization` header removed from cross-origin redirects			111	16.1		16.1
`error_event` The error event is fired when the request encountered an error.	1	12	1	1.3	18	1
`getAllResponseHeaders` The XMLHttpRequest method getAllResponseHeaders() returns all the response headers, separated by CRLF, as a string, or returns null if no response has been received.	1	12	1	1.2	18	1
`getAllResponseHeaders (header names lowercase)` Header names returned in all lower case	60	79	64	11	60	11
`getResponseHeader` The XMLHttpRequest method getResponseHeader() returns the string containing the text of a particular header's value.	1	12	1	1.2	18	1
`load_event` The load event is fired when an XMLHttpRequest transaction completes successfully.	1	12	1	1.3	18	1
`loadend_event` The loadend event is fired when a request has completed, whether successfully (after XMLHttpRequestEventTarget/loadevent) or unsuccessfully (after XMLHttpRequestEventTarget/abortevent or XMLHttpRequestEventTarget/error_event).	18	12	5	4	18	3
`loadstart_event` The loadstart event is fired when a request has started to load data.	1	12	3.5	1.3	18	1
`open` The XMLHttpRequest method open() initializes a newly-created request, or re-initializes an existing one.	1	12	1	1.2	18	1
`overrideMimeType` The XMLHttpRequest method overrideMimeType() specifies a MIME type other than the one provided by the server to be used instead when interpreting the data being transferred in a request.	1	12	1	1.2	18	1
`progress_event` The progress event is fired periodically when a request receives more data.	1	12	1	3	18	1
`readyState` The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in. An XHR client exists in one of the following states:	1	12	1	1.2	18	1
`readystatechange_event` The readystatechange event is fired whenever the XMLHttpRequest.readyState property of the XMLHttpRequest changes.	1	12	1	1.2	18	1
`response` The XMLHttpRequest response property returns the response's body content as an ArrayBuffer, a Blob, a Document, a JavaScript Object, or a string, depending on the value of the request's XMLHttpRequest.responseType property.	9	12	6	5.1	18	5
`responseText` The read-only XMLHttpRequest property responseText returns the text received from a server following a request being sent.	1	12	1	1.2	18	1
`responseType` The XMLHttpRequest property responseType is an enumerated string value specifying the type of data contained in the response.	31	12	6	5.1	31	5
`responseType (arraybuffer value)`	31	12	6	5.1	31	5
`responseType (blob value)`	31	12	6	5.1	31	5
`responseType (document value)`	31	12	11	7	31	7
`responseType (json value)`	31	79	10	7	31	7
`responseURL` The read-only XMLHttpRequest.responseURL property returns the serialized URL of the response or the empty string if the URL is null. If the URL is returned, any URL fragment present in the URL will be stripped away. The value of responseURL will be the final URL obtained after any redirects.	37	14	32	8	37	8
`responseXML` The XMLHttpRequest.responseXML read-only property returns a Document containing the HTML or XML retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as XML or HTML.	1	12	1	3	18	1
`send` The XMLHttpRequest method send() sends the request to the server.	1	12	1	1.2	18	1
`send (body ArrayBuffer type)` ArrayBuffer as parameter to send()	9	12	9	6	18	6
`send (body ArrayBufferView type)` ArrayBufferView as parameter to send()	22	12	20	7	25	7
`send (body Blob type)` Blob as parameter to send()	22	12	2	6	25	6
`send (body FormData type)` FormData as parameter to send()	6	12	2	6	18	6
`send (body URLSearchParams type)` URLSearchParams as parameter to send()	59	17	44	15	59	15
`setRequestHeader` The XMLHttpRequest method setRequestHeader() sets the value of an HTTP request header. When using setRequestHeader(), you must call it after calling XMLHttpRequest.open, but before calling XMLHttpRequest.send. If this method is called several times with the same header, the values are merged into one single request header.	1	12	1	1.2	18	1
`status` The read-only XMLHttpRequest.status property returns the numerical HTTP status code of the XMLHttpRequest's response.	1	12	1	1.2	18	1
`statusText` The read-only XMLHttpRequest.statusText property returns a string containing the response's status message as returned by the HTTP server. Unlike XMLHttpRequest.status which indicates a numerical status code, this property contains the text of the response status, such as "OK" or "Not Found". If the request's readyState is in UNSENT or OPENED state, the…	1	12	1	1.2	18	1
`timeout` The XMLHttpRequest.timeout property is an unsigned long representing the number of milliseconds a request can take before automatically being terminated. The default value is 0, which means there is no timeout. Timeout shouldn't be used for synchronous XMLHttpRequests requests used in a document environment or it will throw an InvalidAccessError exception.…	29	12	12	7	29	7
`timeout_event` The timeout event is fired when progression is terminated due to preset time expiring.	29	12	12	7	29	7
`upload` The XMLHttpRequest upload property returns an XMLHttpRequestUpload object that can be observed to monitor an upload's progress.	2	12	3.5	4	18	3
`withCredentials` The XMLHttpRequest.withCredentials property is a boolean value that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authentication headers or TLS client certificates. Setting withCredentials has no effect on same-origin requests.	3	12	3.5	4	18	3.2
`worker_support` Available in workers	4	12	3.5	4	18	5
`XMLHttpRequest` The XMLHttpRequest() constructor creates a new XMLHttpRequest.	1	12	1	3	18	1
`XMLHttpRequestEventTarget` XMLHttpRequestEventTarget is the interface that describes the event handlers shared on XMLHttpRequest and XMLHttpRequestUpload.	1	12	1	1	18	1
`XMLHttpRequestUpload` The XMLHttpRequestUpload interface represents the upload process for a specific XMLHttpRequest. It is an opaque object that represents the underlying, browser-dependent, upload process. It is an XMLHttpRequestEventTarget and can be obtained by calling XMLHttpRequest.upload.	2	12	3.5	4	18	3
`abort_event` The abort event is fired when a request has been aborted, for example because the program called XMLHttpRequest.abort().	2	12	3.5	4	18	3
`error_event` The error event is fired when the request encountered an error.	2	12	3.5	4	18	3
`load_event` The load event is fired when an XMLHttpRequest transaction completes successfully.	2	12	3.5	4	18	3
`loadend_event` The loadend event is fired when a request has completed, whether successfully (after XMLHttpRequestEventTarget/loadevent) or unsuccessfully (after XMLHttpRequestEventTarget/abortevent or XMLHttpRequestEventTarget/error_event).	18	12	5	4	18	3
`loadstart_event` The loadstart event is fired when a request has started to load data.	2	12	3.5	4	18	3
`progress_event` The progress event is fired periodically when a request receives more data.	2	12	3.5	4	18	3
`timeout_event` The timeout event is fired when progression is terminated due to preset time expiring.	29	12	12	7	29	7

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Use cases

Using XMLHttpRequest

The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.

Cautions

May not be supported in older browsers.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Browser support

Use cases

Using XMLHttpRequest

Cautions

Implementation notes

Related links