使用HTML5的FormData對象， 經過 Ajax表單異步提交文件數據

每次在向服務器提交文件對象數據是，老是須要藉助各類三方插件來實現表單異步提交功能，還要爲不一樣的界面去定製不一樣的插件css，至關繁瑣。XMLHttpRequest Level 2 添加了一個新的接口——FormData。利用 FormData 對象，咱們能夠經過 JavaScript 用一些鍵值對來模擬一系列表單控件，咱們還能夠使用 XMLHttpRequest 的 send() 方法來異步的提交表單。與普通的 Ajax 相比，使用 FormData 的最大優勢就是咱們能夠異步上傳二進制文件。
話很少說直接上代碼：

var formData = new FormData();
formData.append('template', that.template);
formData.append('declare', that.declareData.declare);
formData.append('self_intro', that.declareData.self_intro);
formData.append('plan_name', that.declareData.plan_name);
//$("#business_plan") 是一個file類型的input對象
formData.append('business_plan', $("#business_plan")[0].files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);

xhr.setRequestHeader("Accept", "application/json");
xhr.send(formData);
// 指定通訊過程當中狀態改變時的回調函數
xhr.onreadystatechange = function () {
    // 通訊成功時，狀態值爲4
    var completed = 4;
    if (xhr.readyState === completed) {
        if (xhr.status === 200) {
            // 處理服務器發送過來的數據
            var result = JSON.parse(xhr.responseText);
            //這裏你能夠隨意的處理這個result對象了
            //...
        } else {// 處理錯誤
            alert('鏈接超時');
        }
    }
};