使用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('连接超时');
        }
    }
};