以前上傳檔案需要提交Form表單。

HTML5方式上傳檔案，可以通過使用FormData類模擬Form表單提交，從而實現無重新整理上傳檔案。

假設有一個檔案選擇框

<input type="file" name="pic" id="pic" accept="image/gif" />

有下面2種方式上傳檔案：

1、XMLHttpRequest（有進度事件）

var files = document.getElementById('pic').files; //files是檔案選擇框選擇的檔案物件陣列

if(files.length == 0) return; 

var form = new FormData(), 
    url = 'http://.......', //伺服器上傳地址
    file = files[0];
form.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open("post", url, true);

//上傳進度事件
xhr.upload.addEventListener("progress", function(result) {
    if (result.lengthComputable) {
        //上傳進度
        var percent = (result.loaded / result.total * 100).toFixed(2); 
    }
}, false);

xhr.addEventListener("readystatechange", function() {
    var result = xhr;
    if (result.status != 200) { //error
        console.log('上傳失敗', result.status, result.statusText, result.response);
    } 
    else if (result.readyState == 4) { //finished
        console.log('上傳成功', result);
    }
});
xhr.send(form); //開始上傳
 

2、Fetch API（目前不支援進度事件）

var form = new FormData(),
    url = 'http://.......', //伺服器上傳地址
    file = files[0];
form.append('file', file);

fetch(url, {
    method: 'POST',
    body: form
}).then(function(response) {
    if (response.status >= 200 && response.status < 300) {
        return response;
    } 
    else {
        var error = new Error(response.statusText);
        error.response = response;
        throw error;
    }
}).then(function(resp) {
    return resp.json();
}).then(function(respData) {
    console.log('檔案上傳成功', respData);
}).catch(function(e) {
    console.log('檔案上傳失敗', e);
});