FormData對象用以將數(shù)據(jù)編譯成鍵值對，以便用XMLHttpRequest來發(fā)送數(shù)據(jù)。其主要用于發(fā)送表單數(shù)據(jù)，但亦可用于發(fā)送帶鍵數(shù)據(jù)(keyed data)，而獨立于表單使用。
你可以自己創(chuàng)建一個FormData對象，然后調用它的append()方法來添加字段，像這樣：
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); //數(shù)字123456會被立即轉換成字符串 "123456"
// HTML 文件類型input，由用戶選擇
formData.append("userfile", fileInputElement.files[0]);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
通過HTML表單創(chuàng)建FormData對象
想要構造一個包含F(xiàn)orm表單數(shù)據(jù)的FormData對象，需要在創(chuàng)建FormData對象時指定表單的元素。
示例：
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));
你還可以在創(chuàng)建一個包含F(xiàn)orm表單數(shù)據(jù)的FormData對象之后和發(fā)送請求之前，附加額外的數(shù)據(jù)到FormData對象里，像這樣：
var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "index.php");
formData.append("Id", 10);
request.send(formData);
上傳進度條
XMLHttpRequest第二版還定義了一個progress事件，可以用來制作進度條。
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
console.log(complete)
}
};
拖放上傳
最后，利用HTML5的拖放功能，實現(xiàn)拖放上傳。
先在頁面中放置一個容器，用來接收拖放的文件。
html
<div id="holder"></div>
css
#holder {
border: 10px dashed #ccc;
width: 300px;
min-height: 300px;
margin: 20px auto;
}
#holder.hover {
border: 10px dashed #0c0;
}
js
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragleave = function () { this.className = ''; return false; };
holder.ondrop = function (event) {
event.preventDefault();
this.className = '';
var files = event.dataTransfer.files;
// 開始上傳文件
};
無跳轉上傳文件，還可以借助
iframe實現(xiàn)，jQuery有一個form插件便是使用的這種方式，如果想追求更好的兼容性的話，可以一試，加油!
