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/

欢迎入群一起讨论