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