前端上传文件或者视频显示进度条

html:

在js创建监听:
// 创建监听类
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;
}
}
上传文件的时候添加(我这边使用lauyi上传):
var uploadInst = upload.render({
elem: ‘#uploadDOC’, //绑定元素
url: ‘uploadFileTemp’, //上传接口
exts:“doc|docx”,
data:{file_type:21},
before:function(){
element.progress(‘demo’, ‘0%’);//设置页面进度条
},
xhr:xhrOnProgress,
progress:function(value){//上传进度回调 value进度值
element.progress(‘demo’, value+’%’);//设置页面进度条
},
done: function(res){
},
error: function(){
layer.alert(“上传文件失败”);
}
});