寫在前面
之所以會有此篇有兩個原因：
- FormData對于XMLHttpRequest非常重要，所有以Ajax方式上傳文件的功能都需要用到它。
- XMLHttpRequest規(guī)范的內(nèi)容太多了，放到一篇中介紹實現(xiàn)是太過寵大；不僅對于作者來說負擔(dān)太重，對于讀者來說也不宜消化。
基于以上原因，我就把FormData單獨出來了。
此篇一定要結(jié)合Ajax之魂-WEB中的XMLHttpRequest規(guī)范一起看；并且此篇是以
Ajax之魂-WEB中的XMLHttpRequest規(guī)范的附錄出現(xiàn)的，所以如果單獨看了此篇，意義不大。
FormData 定義
以下代碼來自W3C的“XMLHttpRequest Level 1”規(guī)范。
[Constructor(optional HTMLFormElement form )]
interfaceFormData {
void append([EnsureUTF16] DOMStringname, Blob value, optional EnsureUTF16] DOMStringfilename );
void append([EnsureUTF16] DOMStringname, [EnsureUTF16] DOMStringvalue);
};
FormData對象可以描述為是一列表有序的name和value組成的條目（此處為直譯，因為以作者的水平實現(xiàn)不知道應(yīng)該翻譯成中文應(yīng)該使用哪個詞語，英文為：entry）。也就是說，有一組（數(shù)量不定且可變）條目組成了FormData對象，這些條目中和每一個都包含兩個屬性，分別是name和value。
在一個條目中，如果它的value屬性是String類型的，那么這個條目就是String類型的，否則這個條目就是File類型的。如果條目是File類型的，它的文件名存儲在條目的value屬性的name特性（可以說是屬性，這里翻譯為特性僅僅是為了和屬性區(qū)分開）中。
創(chuàng)建FormData對象
fd = new FormData([form]);
參數(shù)form是可選的，如果傳了參數(shù)，則form必須是一個HTML 中 form 元素的DOM對象。
創(chuàng)建FormData 對象的示例代碼
調(diào)用無參構(gòu)造函數(shù)，創(chuàng)建一個空的FormData對象
// 無參構(gòu)造函數(shù)
fd = new FormData();
利用JavaScript代碼創(chuàng)建一個 form 元素的DOM對象，然后傳參給FormData的構(gòu)造器得到有初始值的FormData對象
// 構(gòu)造 form 元素的DOM對象
form = document.createElement("form");
input = document.createElement("input");
input.name = "username";
input.value = "仵士杰";
form.appendChild(input);
fd = new FormData(form);
利用HTML中的form表單獲取 form 元素的DOM對象，然后傳參給FormData的構(gòu)造器得到有初始值的FormData對象
//HTML代碼如下
<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8" /></head>
<body>
<form id="myForm">
<input name="username" value="仵士杰" />
</form>
</body>
</html>
//JavaScript代碼如下
form = document.getElementById("myForm");
fd = new FormData(form);
FormData 對象的創(chuàng)建過程
FormData對象的構(gòu)造函數(shù)的執(zhí)行步驟如下：
- 把 變量 fd 設(shè)置為了個新的FormData對象
- 如果傳了form參數(shù)，從form表單中構(gòu)造數(shù)據(jù)集，并設(shè)置 fd 的 entries 。
- 返回 fd
向FormData對象中加入新的條目
fd.append(name,value [,filename]);
上面的代碼向FormData對象中加入了一個條目
參數(shù)說明
name：添加成功后將其值賦給條目的name屬性，必傳參數(shù)；
value：添加成功后將a其值賦給條目的value屬性，必傳參數(shù)；
filename：可選參數(shù)，如果value的類型為File，filename參數(shù)的值將被賦給條目中value屬性的name特性。
向FormData對象中加新條目的過程
- 把 變量 entry 設(shè)置成一個新的 條目對象
- 把參數(shù)name的值賦給entry中的name屬性
- 如果value是Blob類型的對象，則把value轉(zhuǎn)換成的File對象后將value的name特性值設(shè)為“blob”。
- 如果value是File類型的對象，且給定了filename參數(shù)，則把filename的值賦給value中的name特性。
- 把value賦值給entry的value屬性。
- 把 entry 添加到FormData對象的entries列表中。
打完收功
以上就是有關(guān)FormData的全部介紹，作者已經(jīng)盡力寫到最詳盡；如果您還有疑問請留言，作者將盡量改進，以期幫助到更廣大的WEB工程師和愛好者。
