FormData的用途

FormData主要有兩個用途：

1.將form表單元素的name與value進行組合，實現表單數據的序列化，從而減小表單元素的拼接，提升工做效率。

2.異步上傳文件

一，建立formData對象

1，建立一個空對象

//經過FormData構造函數建立一個空對象

var formdata=new FormData()

//能夠經過append()方法來追加數據

formdata.append('name','laotie')

//經過get方法對值進行讀取

console.log(formdata.get('name'));//laotie

//經過set方法對值進行設置

formdata.set('name','laoliu');

console.log(formdata.get('name'));//laoliu

2，經過表單對formData進行初始化

建立表單：

<form id="advForm">

　　<p> 廣告名稱：<input type="text" name="advName" value="xixi">  </p>

　　<p>廣告類別：<select name="advType">

　　　　<option value="1">輪播圖</option>

　　　　<option value="2">輪播圖底部廣告</option>

　　　　<option value="3">熱門回收廣告</option>

　　　　<option value="4">優品精選廣告</option>　　

　　</select></p>

　　<p> <input type="button" id="btn" value="添加"> </p>

</form>

經過表單元素做爲參數，實現對formData的初始化：

//得到表單按鈕元素

var btn=document.querySelector("#btn")

//爲按鈕添加點擊事件

btn.onclick=function(){

　　//根據ID得到頁面當中的form表單元素

　　var form=document.querySelector("#advForm");

　　//將得到的表單元素做爲參數，對formData進行初始化

　　var formdata=new FormData(form)

　　//經過get方法得到name爲advName元素的value值

　　console.log(formdata.get("advName"))//xixi

　　//經過get方法得到name爲advType元素的value值

　　console.log(formdata.get("advType"))//1

}

二，操做方法

1，經過get(key)與getAll(key)來獲取對應的值

//獲取key爲age的第一個值

formdata.get("age")

//獲取key爲age的全部值，返回值爲數組類型

formdata.getAll("age")

2，經過append(key,value)在數據末尾追加數據

//經過FormData構造函數建立一個空對象

var formdata=new FormData()

//經過append()方法在末尾追加key爲name值爲laoliu的數據

formdata.append("name","laoliu")

//經過append()方法在末尾追加key爲name值爲laoli的數據

formdata.append("name","laoli")

//經過append()方法在末尾追加key爲name,值爲laotie的數據

formdata.append("name","laotie")

//經過get方法讀取key爲name的第一個值

console.log(formdata.get("name"));//laoliu

//經過getAll方法讀取key爲name的全部值

console.log(formdata.getAll("name"))//["laoliu","laoli","laotie"]

3，經過set(key,value)來設置修改數據

key的值不存在，會添加一條數據

//經過Formdata夠着函數建立一個空對象

var formdata=new FormData()

//若是key的值不存在會爲數據添加一個key爲name值爲laoliu的數據

formdata.set("name","laoliu")

//經過get方法讀取key爲name的第一個值

console.log(formdata.get("name"));//laoliu

key的值存在，會修改對應的value值

//經過FomrData構造函數建立一個空對象

var formdata=new FormData()

//經過append()方法在末尾追加key爲name值爲laoliu的數據

formdata.append("name","laoliu")

//經過append()方法在末尾追加key爲name，值爲laoliu2的數據

formdata.append("name","laoliu2")

//經過get方法讀取key爲name的第一個值

console.log(formdata.get("name"))://laoliu

//經過getAll方法讀取key爲name的全部值

console.log(formdata.getAll("name"));["laoliu","laoliu2"]

//將存在的key爲name的值修改成laoli

formdata.set("name","loali")

//經過get方法讀取key爲name的第一個值

console.log(formdata.get("name"));//laoli

//經過getAll方法讀取key爲name的全部值

console.log(formdata.getAll("name"));//["laoli"]

4，經過has(key)來判斷是否存在對應的key值

//經過FormData構造函數建立一個空對象

var formdata=new FormData()

//經過append()方法在末尾追加key爲name值爲laoliu的數據

formdata.append("name","laoliu")

//判斷是否包括key爲name的數據

console.log(formdata.has("name"));//true

//判斷是否包含key爲age的數據

console.log(formdata.has("age"));//false

5.經過delete(key)能夠刪除數據

//經過FormData構造函數建立一個空對象

var formdata=new FormData()

//經過append()方法在末尾追加key爲name值爲laoliu的數據

formdata.append("name","laoliu")

console.log(formdata.get("name"))//laoliu

//刪除key爲name的值

formdata.delete("name")

console.log(formdata.get("name"))//null

三，經過XMLHttpRequest發送數據

建立表單：

<form id="advForm">

　　<p>廣告名稱：<input type="text" name="advName" value="xixi"></p>

　　<p>廣告類別：<select name="advType">

　　　　<option value="1">輪播圖</option>

　　　　<option value="2">輪播圖底部廣告</option>

　　　　<option value="3">熱門回收廣告</option>

　　　　<option value="4">優品精選廣告</option>

　　</select></p>

　　<p>廣告圖片：<input type="file" name="advPic"></p>

　　<p>廣告地址：<input type="text" name="advUrl"></p>

　　<p>廣告排序：<input type="text" name="orderBy"></p>

　　<p><input type="button" id="btn" value="添加"></p>

</form>

發送數據：

var btn=document.querySelector("#btn")

btn.onclick=function(){

　　var formdata=new FormData(document.getElementById("advForm"))

　　var xhr=new XMLHttpRequest();

　　xhr.open("post","http://127.0.0.1/adv")

　　xhr.send(formdata)

　　xhr.onload=function(){

　　　　if(xhr.status==200){

　　　　　　//....

　　　　}

　　}

}

 摘錄路徑：https://www.jianshu.com/p/e984c3619019