Use of formdata object, VAR formdata=new formdata()

brief introduction

FormData Use of objects ：

1. Use some key value pairs to simulate a series of form controls ： the form Of form elements in name And value Assemble into one queryString
2. Upload binaries asynchronously

FormData Object operation method , All in the prototype , I don't have any properties or methods
Proto: FormData

Create an empty object

// adopt FormData Constructor creates an empty object 
var formdata=new FormData();
// Can pass append() Method to append data 
formdata.append("name","laotie");
// adopt get Method to read the value 
console.log(formdata.get("name"));//laotie
// adopt set Method to set the value 
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu

Through the form to FormData initialization

<form id="advForm">
    <p> Advertising name ：<input type="text" name="advName"  value="xixi"></p>
    <p> Advertising category ：<select name="advType">
        <option value="1"> Shuffling figure </option>
        <option value="2"> At the bottom of the carousel </option>
        <option value="3"> Hot recycling ads </option>
        <option value="4"> Select ads for premium products </option>
    </select></p>
    <p><input type="button" id="btn" value=" add to "></p>
</form>



// Using form elements as parameters , Realize to formData The initialization ：
// Get form button elements 
var btn=document.querySelector("#btn");
// Add click event for button 
btn.onclick=function(){
    
    // according to ID Get the form Form Elements 
    var form=document.querySelector("#advForm");
    // Take the resulting form element as an argument , Yes formData To initialize 
    var formdata=new FormData(form);
    // adopt get Methods to get name by advName Elemental value value 
    console.log(formdata.get("advName"));//xixi
    // adopt get Methods to get name by advType Elemental value value 
    console.log(formdata.get("advType"));//1 
}

get(key) getAll(key) To get the corresponding value

//  obtain key by age First value of 
formdata.get("age"); 
 //  obtain key by age All values , The return value is an array type 
formdata.getAll("age");

adopt append(key,value) Appending data at the end of the data

// adopt FormData Constructor creates an empty object 
var formdata=new FormData();
// adopt append() Method appends key by name The value is laoliu The data of 
formdata.append("name","laoliu");
// adopt append() Method appends key by name The value is laoli The data of 
formdata.append("name","laoli");
// adopt append() Method appends key by name The value is laotie The data of 
formdata.append("name","laotie");
// adopt get Method reading key by name First value of 
console.log(formdata.get("name"));//laoliu
// adopt getAll Method reading key by name All values 
console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]

adopt set(key, value) To set and modify data

//key Does not exist , A piece of data will be added 
// adopt FormData Constructor creates an empty object 
var formdata=new FormData();
// If key The value of does not exist and will add a key by name The value is laoliu The data of 
formdata.set("name","laoli");
// adopt get Method reading key by name First value of 
console.log(formdata.get("name"));//laoli

key Value of exists , The corresponding value value

// adopt FormData Constructor creates an empty object 
var formdata=new FormData();
// adopt append() Method appends key by name The value is laoliu The data of 
formdata.append("name","laoliu");
// adopt append() Method appends key by name The value is laoliu2 The data of 
formdata.append("name","laoliu2");
// adopt get Method reading key by name First value of 
console.log(formdata.get("name"));//laoliu
// adopt getAll Method reading key by name All values 
console.log(formdata.getAll("name"));//["laoliu", "laoliu2"]

// There will be key by name Is changed to laoli
formdata.set("name","laoli");
// adopt get Method reading key by name First value of 
console.log(formdata.get("name"));//laoli
// adopt getAll Method reading key by name All values 
console.log(formdata.getAll("name"));//["laoli"]

adopt has(key) To determine whether there is a corresponding key value

// adopt FormData Constructor creates an empty object 
var formdata=new FormData();
// adopt append() Method appends key by name The value is laoliu The data of 
formdata.append("name","laoliu");
// Judge whether it includes key by name The data of 
console.log(formdata.has("name"));//true
// Judge whether it includes key by age The data of 
console.log(formdata.has("age"));//false

adopt delete(key) You can delete data

// adopt FormData Constructor creates an empty object 
var formdata=new FormData();
// adopt append() Method appends key by name The value is laoliu The data of 
formdata.append("name","laoliu");
console.log(formdata.get("name"));//laoliu
// Delete key by name Value 
formdata.delete("name");
console.log(formdata.get("name"));//null