Use of the form FormData

“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

How to create a formData object instance

Create an empty object

var formData = new FormData();// Add data using the append method
Copy the code

2. Initialize the object using an existing form

Form the sample<form id="myForm" action="" method="post">
    <input type="text" name="name">The name<input type="password" name="psw">password<input type="submit" value="Submit">
</form>
Copy the code

• Methods the sample

// Get an existing form from the page
var form = document.getElementById("myForm");
// Use the form to initialize
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
// You can also add other data based on this
formData.append("token"."kshdfiwi3rh");
Copy the code

Two, operation method

FormData stores data in the form of key pairs. A key is unique. A key may correspond to multiple values. For form initializations, each form field corresponds to a single piece of data, and their HTML name attribute is the key value, and their value attribute corresponds to the value value.

1. Get the value

• Obtain the corresponding value by get(key)/getAll(key)

formData.get(“name”); Formdata.get (“name”); formdata.get (“name”); // Return an array of all values whose key is name

2 Adding Data

• Append (Key, value) is used to add data. If the specified key does not exist, a new data is added. If the key does exist, it is added to the end of the data

formData.append("k1"."v1");
formData.append("k1"."v2");
formData.append("k1"."v3");
Copy the code

• The method and result of obtaining the value are as follows

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]
Copy the code

3. Set and modify data

• Set (key, value) to modify data. If the specified key does not exist, a new key will be added; if it does, the corresponding value will be modified

formData.append("k1"."v1");
formData.set("k1"."1");
formData.getAll("k1"); / / / "1"
Copy the code

4. Check whether corresponding data exists

• Has (key) checks whether the corresponding key value exists

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

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

5. Delete data

• Delete (key) Deletes data

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

formData.getAll("k1"); / / []
Copy the code

3. JQuery example

See section 2 for how to add data

• ProcessData: false, contentType: false, used for asynchronous upload binary files.

 $.ajax({
    url: 'xxx'.type: 'POST'.data: formData,                    // Upload the data encapsulated in formData
    dataType: 'JSON'.cache: false./ / no cache
    processData: false.// jQuery does not process the sent data
    contentType: false.// jQuery does not set the content-type request header
    success:function (data) {           // Successful callback
        console.log(data); }});Copy the code

The attached:

Convert base64 image URL data to Blob file format @param urlData Base64 image represented by URL

function convertBase64UrlToBlob(urlData) {
    var bytes = window.atob(urlData.split(', ') [1]); // Remove the url header and convert it to byte
    // Handle exceptions to convert ASCII codes less than 0 to greater than 0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for(var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
        type: 'image/png'
    });
}
Copy the code