需求
当上传的文件相对较大时，用户能够须要守候较长的时刻，这个时刻前端假如没有任何提醒的话，体验不是很好，假如有上传进度提醒，就会好许多。而要在上传历程及时显现上传进度，则须要已上传的大小和文件总大小。
条件
要求是异步的。由于要及时猎取到上传的进度，则要求需是异步的，假如是同步的话，会直到要求完成才猎取到相应。
完成
这里总结的主如果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。
别的一点，上传胜利后设置重定向到网站某页面的话，能够会报错跨域重定向。
