需求
当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。而要在上传过程实时显示上传进度，则需要已上传的大小和文件总大小。
前提
实现
这里总结的主要是js方面，至于进度条的显示，有的UI框架，比如semantic就自带了进度条的实现，直接使用即可，没有的话也可以自己用改变div宽度等方式实现，这里不赘述。
如何获取到文件的上传进度？
Javascript的XMLHttpRequest提供了一个progress事件，这个事件会返回文件已上传的大小和总大小，根据这两个值，就可以计算上传进度了，关于这个方法，在《Javascript高级程序设计(第3版)》21章第3节中有叙述，有这本书在手的可以看一下。下面贴一下代码。
XMLHttpRequest:progress事件
使用Javascript的XMLHttpRequest的progress事件，实现示例代码为：
var formData = new FormData();
formData.append("file", document.getElementById('file').files[0]);
formData.append("token", token_value); // 其他参数按这样子加入
var xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadurl');
// 上传完成后的回调函数
xhr.onload = function () {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.log('上传出错');
}
};
// 获取上传进度
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var percent = Math.floor(event.loaded / event.total * 100) ;
// 设置进度显示
$("#J_upload_progress").progress('set progress', percent);
}
};
xhr.send(formData);
复制代码
关于FormData和XMLHttpRequest, 可以搜下W3C了解详情。
jQuery封装的xhr
jQuery封装了xhr的实现, 也可以使用jQuery的ajax获得上传进度，示例代码：
var formData = new FormData();
formData.append("file", document.getElementById('file').files[0]);
formData.append("token", token_value);
$.ajax({
url: "/uploadurl",
type: "POST",
data: formData,
processData: false, // 不要对data参数进行序列化处理，默认为true
contentType: false, // 不要设置Content-Type请求头，因为文件数据是以 multipart/form-data 来编码
xhr: function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e) {
if (e.lengthComputable) {
var percent = Math.floor(e.loaded/e.total*100);
if(percent <= 100) {
$("#J_progress_bar").progress('set progress', percent);
$("#J_progress_label").html('已上传：'+percent+'%');
}
if(percent >= 100) {
$("#J_progress_label").html('文件上传完毕，请等待...');
$("#J_progress_label").addClass('success');
}
}
}, false);
}
return myXhr;
},
success: function(res){
// 请求成功
},
error: function(res) {
// 请求失败
console.log(res);
}
});
复制代码
关于jQuery ajax的xhr, 具体可查看W3C。
vue-resource
var formData = new FormData();
formData.append('token', token_value); // csrf token
formData.append("works", document.getElementById('file').files[0]); // file
var url = $("#R_batch_upload_url").val();
vm.$http.post(url, formData, {
progress: (e) => {
if (e.lengthComputable) {
var percent = Math.floor(e.loaded/e.total*100);
if(percent <= 100) {
$("#J_progress_bar").progress('set progress', percent);
$("#J_progress_label").html('已上传：'+percent+'%');
}
if(percent >= 100) {
$("#J_progress_label").html('文件上传完毕，提交表单中，请等待...');
$("#J_progress_label").addClass('success');
}
}
}
})
.then((res) => {
if(res.ok && res.status === 200) {
window.location.href = window.location.href;
}
}, (res) => {
if(res.status === 400) {
$("#J_progress_label").html('文件格式错误，请修改后重试');
$("#J_progress_label").addClass('warning');
console.log(res);
vm.errMsg.show = true;
vm.errMsg.msg = res.body.msg;
vm.canSend = true;
// TODO hide the loader dimmer
$("#J_upload_batch").dimmer("hide");
} else {
$("#J_progress_label").html(res.statusText);
$("#J_progress_label").addClass('warning');
}
});复制代码
七牛云储存
有些文件过大，后台会采取上传到七牛，再获取其地址保存到数据库的方式，这种方式的话，前端可以使用上面两种方式XMLHttpRequest或jQuery封装的xhr实现发送请求及获取上传进度，如果需要更复杂的上传数据处理，也可以考虑使用七牛提供的配套Javascript SDK实现，若是只需要进度提示的话，并不需要引入七牛JS SDK。
另外一点，上传成功后设置重定向到网站某页面的话，可能会报错跨域重定向。
相关链接
原文发布时间为：2018年07月02日
作者：掘金
本文来源：掘金 如需转载请联系原作者
