html5 の FormData オブジェクトを使用して、Ajax フォーム経由でファイル データを非同期に送信します

ファイル オブジェクト データをサーバーに送信するたびに、フォームの非同期送信機能を実装するために常にさまざまなサードパーティ プラグインを使用する必要があります。また、インターフェイスごとに異なるプラグイン CSS をカスタマイズする必要もあります。面倒。 XMLHttpRequest レベル 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('连接超时');
        }
    }
};