FormData

FormData 對象的使用：
1.用一些鍵值對來模擬一系列表單控件：即把form中全部表單元素的name與value組裝成一個queryString。
2. 異步上傳二進制文件。

FormData對象原型上的屬性和方法：

 

let formData = new FormData()
formData.append('user', 'zhang')
獲取 formData.get('user')  //zhang
刪除 formData.delete('user')
.....

 

使用FormData對象發送文件

HTML部分
<form action="">
        <label for="">
            姓名: <input type="text" name="name">
        </label>
        <label for="">
            文件：<input id="file" type="file" name="file">
        </label>
        <label for="">
            <input type="button" value="保存">
        </label>
</form>
JS部分
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
    // 文件元素
    var file = document.querySelector('[type=file]');
    // 經過FormData將文件轉成二進制數據
    var formData = new FormData();
    // 將文件轉二進制
    *****注意2******
    formData.append('upload', file.files[0]);
    *****注意1******
    var xhr = new XMLHttpRequest;
    xhr.open('post', 'file.php');
    // 監聽上傳進度
    xhr.upload.onprogress = function (ev) {
    // 事件對象
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + '%';

        console.log(percent);

        progress.style.width = percent;
    }

    xhr.send(formData);

    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                    //
            }
    }
}

 

new FormData的參數是一個DOM對象

var formData = new FormData($("#file")[0]);

 

 

原文：https://segmentfault.com/a/1190000012327982?utm_source=tag-newest

比較完整的講解：http://www.aijquery.cn/Html/html5/214.html