一个菜鸟驿站!

layui中上传文件显示上传进度条

Js 2018-12-12 浏览(3931) 评论(0)
- N +

文章目录 [+]

前言

尽管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谢谢。16_e18d20c94006dfe0-7524faeb6c8ff751-2e2d2449c5737ae0159ced46c7d05249.gif


标签:
作者:猫巷

,

评论列表 (0)条评论

发表评论

召唤伊斯特瓦尔