ajax文件上传监听进度xhr.upload.onprogress
jQuery中的ajax上传方式
$.ajax({
xhrFields: {
withCredentials: true
},
crossDomain: true == !(document.all),
type: 'POST', // 请求方式
url: globleObj.domain + '/wjw/workPlan/uploadPdf', // 接口地址
data: addFd, // 请求参数
dataType: 'json',// 返回参数格式
cache: false,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false,// 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
},
error: function () {
},
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
$(".barColor").show();
var percent = Math.floor( e.loaded / e.total * 100);
console.log(percent);
if(percent == 100){
// $(".barColor").hide();
}else{
// $(".barColor").show();
$('.progressInfo').css('width', (percent * 6)+'px');
$('.progressInfo').html(percent + '%');
}
}
};
}
return xhr;
}
})
vue中的ajax上传方式
$.ajax({
url: url,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
xhr: () => {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
that.progressPercent = Number(Math.floor( e.loaded / e.total * 100));
if(percent == 100){
//文件上传进度达到100之后的操作
}
}
};
}
},
success: () => {
// 文件上传成功后执行的操作
}
error: function() {
// 获取异常,给出错误提示
},
});