HTML5 文件上传的2种方式

以前上传文件需要提交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);
});

参考文章：http://blog.ncmem.com/wordpress/2023/12/26/html5-%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%9a%842%e7%a7%8d%e6%96%b9%e5%bc%8f/
欢迎入群一起讨论