Verwenden Sie das FormData-Objekt von HTML5, um Dateidaten asynchron über das Ajax-Formular zu übermitteln

Jedes Mal, wenn Sie Dateiobjektdaten an den Server übermitteln, müssen Sie immer verschiedene Plug-Ins von Drittanbietern verwenden, um die asynchrone Formularübermittlungsfunktion zu implementieren, und Sie müssen auch verschiedene Plug-In-CSS für verschiedene Schnittstellen anpassen ist ziemlich umständlich. XMLHttpRequest Level 2 fügt eine neue Schnittstelle hinzu – FormData. Mit dem FormData-Objekt können wir einige Schlüssel-Wert-Paare verwenden, um eine Reihe von Formularsteuerelementen über JavaScript zu simulieren. Wir können auch die send()-Methode von XMLHttpRequest verwenden, um das Formular asynchron zu senden. Im Vergleich zu gewöhnlichem Ajax besteht der größte Vorteil der Verwendung von FormData darin, dass wir Binärdateien asynchron hochladen können.
Kommen wir ohne weitere Umschweife direkt zum Code:

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