目錄
1. 概述
2. 建構函式
3. 操作方法
    3.1 獲取值
    3.2 新增資料
    3.3 設定修改資料
    3.4 判斷是否該資料
    3.5 刪除資料
    3.6 遍歷
4. 傳送資料
注意點

1. 概述

FormData型別其實是在XMLHttpRequest 2級定義的，它是為序列化表以及建立與表單格式相同的資料（當然是用於XHR傳輸）提供便利。

FormData 物件的使用：
1.用一些鍵值對來模擬一系列表單控制元件：即把form中所有表單元素的name與value組裝成
一個queryString
2. 非同步上傳二進位制檔案。

2. 建構函式

建立一個formData物件例項有幾種方式

1、建立一個空物件例項

var formData = new FormData();

此時可以呼叫append()方法來新增資料

2、使用已有的表單來初始化一個物件例項

假如現在頁面已經有一個表單

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密碼
    <input type="submit" value="提交">
</form>
 

我們可以使用這個表單元素作為初始化引數，來例項化一個formData物件

// 獲取頁面已有的一個form表單
var form = document.getElementById("myForm");
// 用表單來初始化
var formData = new FormData(form);
// 我們可以根據name來訪問表單中的欄位
var name = formData.get("name"); // 獲取名字
var psw = formData.get("psw"); // 獲取密碼
// 當然也可以在此基礎上，新增其他資料
formData.append("token","kshdfiwi3rh");
 

3. 操作方法

首先，我們要明確formData裡面儲存的資料形式，一對key/value組成一條資料，key是唯一的，一個key可能對應多個value。如果是使用表單初始化，每一個表單欄位對應一條資料，它們的HTML name屬性即為key值，它們value屬性對應value值。

3.1 獲取值

我們可以通過get(key)/getAll(key)來獲取對應的value，

formData.get("name"); // 獲取key為name的第一個值
formData.getAll("name"); // 返回一個數組，獲取key為name的所有值

3.2 新增資料

我們可以通過append(key, value)來新增資料，如果指定的key不存在則會新增一條資料，如果key存在，則新增到資料的末尾

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

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

3.3 設定修改資料

我們可以通過set(key, value)來設定修改資料，如果指定的key不存在則會新增一條，如果存在，則會修改對應的value值。

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

3.4 判斷是否該資料

我們可以通過has(key)來判斷是否對應的key值

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

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

3.5 刪除資料

通過delete(key)，來刪除資料

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

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

3.6 遍歷

我們可以通過entries()來獲取一個迭代器，然後遍歷所有的資料，

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}

可以看到返回迭代器的規則

1. 每呼叫一次next()返回一條資料，資料的順序由新增的順序決定

2. 返回的是一個物件，當其done屬性為true時，說明已經遍歷完所有的資料，這個也可以作為判斷的依據

3. 返回的物件的value屬性以陣列形式儲存了一對key/value，陣列下標0為key，下標1為value，如果一個key值對應多個value，會變成多對key/value返回

我們也可以通過values()方法只獲取value值

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. 傳送資料

我們可以通過xhr來發送資料

var xhr = new XMLHttpRequest();
xhr.open("post","login");
// 監聽上傳進度
xhr.upload.onprogress = function (ev) {
// 事件物件
// console.log(ev);
    var percent = (ev.loaded / ev.total) * 100 + '%';
    console.log(percent);
    progress.style.width = percent;
}
xhr.send(formData);
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
        //
    }
}

這種方式可以來實現檔案的非同步上傳。

注意2：使用jQuery+Ajax進行表單提交至後臺處理

 $.ajax({
    url: 'formController/save',
    type: 'POST',
    data: formdata,                    // 上傳formdata封裝的資料
    dataType: 'JSON',
    cache: false,                      // 不快取
    processData: false,                // jQuery不要去處理髮送的資料
    contentType: false,                // jQuery不要去設定Content-Type請求頭
    success:function (data) {           //成功回撥
        console.log(data);
    }
});

 注意2：引數
new FormData的引數是一個DOM物件，而非jQuery物件