文章目录 [+]
前言
尽管layui很好使用，但是我在用它上传文件时，出现了这么一个问题，就是没办法显示进度条，这就很令人尴尬了，说实话，作为一个PHP程序员，我是不允许这样的事发生滴。
撸代码
改源码
如果用的是layui.all.js的话，我们修改如下地方：
layui.each ( a , function ( e , a ) {
var r = new FormData;
r.append ( l.field , a ), layui.each ( l.data , function ( e , i ) {
i = "function" == typeof i ? i () : i, r.append ( e , i )
} ), i.ajax ( {
url: l.url ,
type: "post" ,
data: r ,
contentType: !1 ,
processData: !1 ,
dataType: "json" ,
headers: l.headers || {} ,
success: function ( i ) {
t++, d ( e , i ), u ()
} ,
error: function (err) {
n++, o.msg ( err.responseText ), m ( e ), u ()
}
} )
} )在dataType: "json"后边添加代码，改为如下格式，为了大家好复制，我下边就直接改好了，供大家复制：
layui.each ( a , function ( e , a ) {
var r = new FormData;
r.append ( l.field , a ), layui.each ( l.data , function ( e , i ) {
i = "function" == typeof i ? i () : i, r.append ( e , i )
} ), i.ajax ( {
url: l.url ,
type: "post" ,
data: r ,
contentType: !1 ,
processData: !1 ,
dataType: "json" ,
xhr: function () {
var index = e;
var newXhr = i.ajaxSettings.xhr ();
newXhr.upload.addEventListener ( 'progress' , function ( e ) {
var percent = Math.floor ( e.loaded / e.total * 100 );
typeof l.progress === 'function' && l.progress ( e , percent ,index)
} );
return newXhr
} ,
headers: l.headers || {} ,
success: function ( i ) {
t++, d ( e , i ), u ()
} ,
error: function (err) {
n++, o.msg ( err.responseText ), m ( e ), u ()
}
} )
} )添里面参数percent为进度值，index为当前文件唯一索引。
如果使用的upload.js的话，修改方式如上。
用到自己的项目中
其实用到自己的项目中也很简单，下边给代码
upload.render ( {
elem: '***'
, url: '***'
, headers: {
'X-CSRF-TOKEN': ''
}
, acceptMime: "image/gif"//打开类型
, accept: 'image'//上传文件类型
, exts: "gif"//文件后缀
, auto: false//自动上传
, bindAction: ".uploadBtn"//绑定上传按钮
, size: "100000"//kb为单位
, multiple: true//多文件上传
, drag: true//是否允许拖拽
//进度条
, progress: function ( e , percent , index ) {
console.log ( percent );//单个文件的上传进度百分比
console.log ( index );//单个文件的唯一索引
}
, choose: function ( obj ) {
}
, before: function ( obj ) {
//预读本地文件示例，不支持ie8
}
, done: function ( res , index , upload ) {
}
, allDone: function ( obj ) { //当文件全部被提交后，才触发
}
, error: function ( index , upload ) {
}
})总结
此文章仅用来记录一下layui上传的问题，也给各位使用layui的大佬提供了一个解决方案，如有帮助点个赞，O(∩_∩)O谢谢。
发表评论