FormData是什么
一、總結
一句話總結：利用 FormData 對象，可以通過JavaScript鍵值對來模擬一系列表單控件，還可以使用 XMLHttpRequest的send() 方法來異步提交表單。
與普通的Ajax相比，使用FormData 的最大優點就是可以異步上傳二進制文件。
1、FormData 對象如何使用？
可以先通過new關鍵字創建一個空的 FormData 對象，然后使用 append() 方法向該對象里添加字段（字段的值可以是一個 Blob 對象，File對象或者字符串，剩下其他類型的值都會被自動轉換成字符串）。
也可以用一個已有的form元素來初始化FormData對象
var formdata = new FormData();
formdata.append("name", "Alice");
formdata.append("id", 30); // 數字30被轉換成字符串"30"
2、如何使用已有的form元素來初始化FormData對象？
用一個已有的form元素來初始化FormData對象，只需把該 form 元素作為參數傳入 FormData 構造函數即可：
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php");
xhr.send(new FormData(myForm));
3、serialize()可以序列化表單數據，那么表單中的二進制數據能被序列化成字符串么？
serialize()可以序列化表單數據，但表單中的二進制數據不能被序列化成字符串。通過html5的FormData對象對帶有二進制數據的表單進行構造，然后通過ajax發送這個構造好的FormData就可以實現異步提交了。
4、JavaScript Ajax的同義詞是什么？
XMLHttpRequest
使用 JavaScript Ajax（XMLHttpRequest）來異步發送 FormData：
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4)
if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
alert(xhr.responseText);
}
xhr.send(new FormData(myForm));
5、 jQuery Ajax如何發送 FormData？
在data數據那里寫上formdata
使用 jQuery Ajax來發送 FormData：
var formdata = new FormData(document.getElementById("myForm"));
$.ajax({
url: "dealing.php",
type: "POST",
data: formdata,
processData: false, // 告訴jQuery不要去處理發送的數據
contentType: false // 告訴jQuery不要去設置Content-Type請求頭
});
二、淺談HTML5的FormData對象
利用 FormData 對象，可以通過JavaScript鍵值對來模擬一系列表單控件，還可以使用 XMLHttpRequest的send() 方法來異步提交表單。
與普通的Ajax相比，使用FormData 的最大優點就是可以異步上傳二進制文件。
可以先通過new關鍵字創建一個空的 FormData 對象，然后使用 append() 方法向該對象里添加字段（字段的值可以是一個 Blob 對象，File對象或者字符串，剩下其他類型的值都會被自動轉換成字符串）。
1、可以使用HTML表單來初始化一個FormData對象
serialize()可以序列化表單數據，但表單中的二進制數據不能被序列化成字符串。通過html5的FormData對象對帶有二進制數據的表單進行構造，然后通過ajax發送這個構造好的FormData就可以實現異步提交了。
用一個已有的form元素來初始化FormData對象，只需把該 form 元素作為參數傳入 FormData 構造函數即可：
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php");
xhr.send(new FormData(myForm));可以在已有表單數據的基礎上，繼續向 FormData 對象添加新的鍵值對：
var myForm = document.getElementById("myForm");
formdata = new FormData(myForm);
formdata.append("number", number);
oReq.send(formData);
2、可以不借助表單，直接向 FormData 對象添加一個 Blob 對象，File對象或者字符串：
var formdata = new FormData();
formdata.append("name", "Alice");
formdata.append("id", 30); // 數字30被轉換成字符串"30"
formdata.append("userfile", selectedFile.files[0]); // selectedFile中包含用戶所選擇的文件
var file = "<a>link!</a>"; // Blob對象包含的文件內容
var blob = new Blob([file], {type: "text/xml"});
formdata.append("file", blob);
var xhr = new XMLHttpRequest();
xhr.open("POST", "dealing.php");
xhr.send(formdata);關於Blob的介紹請見：http://blog.csdn.net/zhouziyu2011/article/details/63684834
3、使用FormData對象發送文件：
1) 使用 JavaScript Ajax（XMLHttpRequest）來異步發送 FormData：
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4)
if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
alert(xhr.responseText);
}
xhr.send(new FormData(myForm));2) 使用 jQuery Ajax來發送 FormData：
var formdata = new FormData(document.getElementById("myForm"));
$.ajax({
url: "dealing.php",
type: "POST",
data: formdata,
processData: false, // 告訴jQuery不要去處理發送的數據
contentType: false // 告訴jQuery不要去設置Content-Type請求頭
});