Jquery上传文件返回上传进度
2020-03-04 本文已影响0人
rgbRed
//首先封装一个方法 返回一个绑定了监听函数的XMLHttpRequest对象
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var data = new FormData(); //创建一个新的表单对象
var file = $(".file_choose")[0].files[0]; //.file_choose应当为一个上传文件表单
data.append("data", file); //将文件存放至表单对象,若有其他需要提交的数据,都可以使用此方法
$.ajax({
method: 'POST', //上传方式
url: "upload_url", //上传地址
processData: false, //让ajax不要序列化data
contentType: false, //让ajax不要操作content-type
data: data, //上传的数据
//调用监听函数
xhr:xhrOnProgress(function(evt){
var percent = evt.loaded / evt.total * 100;//计算百分比
if(percent < 99.9){
percent = "已上传 " + percent.toFixed(2) + "%";
}else{
percent = "视频处理中,请稍后...";
}
$(".loading .layui-layer-content").text(percent); //将进度显示在界面
}),
success: function (data) {
$(".loading").hide();
swal({ //此处使用sweetalert插件
title: "上传成功",
type: "success",
showCancelButton: false,
confirmButtonColor: "#18A689",
confirmButtonText: "关闭",
closeOnConfirm: false
}, function () {
window.location.href="/admin/alist";
});
},
beforeSend: function() { //发送ajax前,将进度界面显示出来
$(".shade2").show();
$(".loading").show();
}
});