Layui文件单个上传、批量上传、多条件上传

Layui常用总结：https://blog.csdn.net/libusi001/article/details/100065911

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、文件上传前端

    

        

            
请选择您要上传的文件
        

        

            

                    

                         文件名：
                        

                            
                        
                 

                        描述：
                        

                            
                        
                    
                

                

                

                

                    
文件名
                    
大小
                    
状态
                    
操作
                
                
                

            

        
        

            选择文件
            开始上传
        
    

二、layui代码

    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //多文件列表
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: ctxPath + 'xxxContrller/uploadFile/'
            , accept: 'file'
            , multiple: true
            , auto: false
            , size: 51200
            , bindAction: '#xxAction'
            , before: function () {
                /*return false;
                console.log("add->" + id + "-" + r);
                alert("ft->" + fileTypeId);
                layer.msg("请选择文件类型！", {icon: 1, time: 1000});
                if (fileTypeId == null && fileTypeId == '' && fileTypeId == "") {
                }*/
                this.data = {
                    "name": $("#name").val(),
                    "xxId": xxId
                };
            }


            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file) {
                    var tr = $([''
                        , '' + file.name + ''
                        , '' + (file.size / 1014).toFixed(1) + 'kb'
                        , '等待上传'
                        , ''
                        , '重传'
                        , '删除'
                        , ''
                        , ''].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                debugger;
                if (res.code == 0) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('上传成功');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                } else if (res.code == 2) {
                    layer.msg("请选择文件类型！", {icon: 5, time: 1000});
                }
                this.error(index, upload);
            }
            , error: function (index) {
                debugger;
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('上传失败1');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });

三、效果

四、后台代码

需要后台代码的同学，关注、点赞并留言：留下邮箱！