Reprinted: https://segmentfault.com/a/1190000006716454

FormData

1. Overview

The FormData type is actually defined at the level of XMLHttpRequest 2, which facilitates the serialization of tables and the creation of data in the same format as the form (for XHR transmission, of course).

2. Constructor

There are several ways to create an instance of a formData object

1. Create an empty object instance

var formData = new FormData();

At this point, you can call the append() method to add data

2. Initialize an object instance using an existing form

Suppose the page already has a form

<form id="myForm" action="" method="post">
    <input type="text" name="name">Name
    <input type="password" name="psw">Password
    <input type="submit" value="Submission">
</form>

We can use this form element as an initialization parameter to instantiate a formData object

// Get an existing form form on the page
var form = document.getElementById("myForm");
// Initialization with forms
var formData = new FormData(form);
// We can access the fields in the form by name
var name = formData.get("name"); // Get the name
var psw = formData.get("psw"); // Get the password
// Of course, other data can also be added on this basis.
formData.append("token","kshdfiwi3rh");

3. Operating methods

First, we need to clarify the form of data stored in formData. A pair of keys / values form a single data. A key is unique, and a key may correspond to multiple values. If form initialization is used, each form field corresponds to a data, their HTML name attribute is the key value, and their value attribute corresponds to the value value value.

key	value
k1	[v1,v2,v3]
k2	v4

3.1 Get Value

We can get(key)/getAll(key) to get the corresponding value.

formData.get("name"); // Get the first value of key as name
formData.get("name"); // Returns an array to get all the values whose key is name

3.2 Adding Data

We can add data by append(key, value), add a new data if the specified key does not exist, and add it to the end of the data if the key exists.

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

3.3 Setting Update Data

We can set the modification data by setting (key, value), add a new key if the specified key does not exist, and modify the corresponding value if it exists.

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

3.4 Judging whether the data is available

We can use has(key) to determine whether the key value corresponds to it or not.

formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

3.5 Delete data

Delete data by delete(key)

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []

3.6 traversal

We can get an iterator through entries(), and then traverse all the data.

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

You can see the rules for returning iterators

1. Each call to next() returns one piece of data, the order of which is determined by the order in which the data is added.

2. It returns an object whose done attribute is true, indicating that all data has been traversed, which can also be used as a basis for judgment.

3. The value attribute of the returned object stores a pair of keys/values in the form of an array, with the array subscript 0 as key and the subscript 1 as value. If a key value corresponds to multiple values, it will become multiple key/value returns.

We can also get only value values through the values() method

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}

4. Send data

We can send data through xhr

var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

This way can realize the asynchronous upload of files.

Reference resources

1. Compatibility Query

2. MDN

3. JavaScript Advanced Programming