进度条失效
首先:要引入对应的js文件和css文件。
其次:监听函数要写!!!
//上传图片
layui.use(['upload', 'element', 'layer'], function () {
var $ = layui.jquery,
upload = layui.upload,
element = layui.element,
layer = layui.layer;
//创建监听函数
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;
}
};
//选完文件后不自动上传
upload.render({
elem: '#test-upload-change',
url: '' //这是上传的接口
,
auto: false,
accept: 'video',
xhr: xhrOnProgress,
progress: function (value) { //上传进度回调 value进度值
console.log(value);
element.progress('demo', value + '%') //设置页面进度条
},
multiple: true
// ,allDone: function(obj){ //当文件全部被提交后,才触发
// console.log(obj.total); //得到总文件数
// console.log(obj.successful); //请求成功的文件数
// console.log(obj.aborted); //请求失败的文件数
// }
,
bindAction: '#test-upload-change-action',
before: function (input) {
//返回的参数item,即为当前的input DOM对象
layer.load(); //上传loading
console.log('文件上传中');
},
done: function (res) {
console.log(res);
layer.closeAll();
layer.msg("上传成功");
}
});
});