layui upload 实现多文件上传

**

layui upload 实现多文件上传

**

js引用：layui.js

下面展示代码：

var opera = layer.open({
                    type: 1,
                    title: '批量导入',
                    area: ['720px', '440px'], // 宽高
                    btnAlign: 'r', //'l'按钮左对齐，'c'按钮居中对齐,'r'按钮右对齐，默认右边
                    shadeClose: false, // 点击阴影关闭弹框
                    closeBtn: false,
                    content: '<div class="layui-upload">' +
                        '  <button type="button" style="margin-top: 10px;margin-left: 10px;" class="btn btn-primary btn-sm btn-rounded mgnR15" id="testList">选择多文件</button> ' +
                        '  <div class="layui-upload-list">' +
                        '    <table class="layui-table">' +
                        '      <thead>' +
                        '        <tr><th>文件名</th>' +
                        '        <th>大小</th>' +
                        '        <th>状态</th>' +
                        '        <th>操作</th>' +
                        '      </tr></thead>' +
                        '      <tbody id="demoList"></tbody>' +
                        '    </table>' +
                        '  </div>' +
                        '<div class="footer-div">' +
                        '  <button type="button" class="upload-btn0" id="testListAction">导入锁具信息</button>' +
                        '  <button type="button" class="upload-btn1" οnclick="closeUpload()">取消</button>' +
                        '</div>' +
                        '</div> ',
                    success: function () {
                        layui.use('upload', function () {
                            var $ = layui.jquery,
                                upload = layui.upload;
                            //多文件列表示例
                            var demoListView = $('#demoList'),
                                uploadListIns = upload.render({
                                    elem: '#testList',
                                    url: '/lockInfo/uploadExcel', //上传接口
                                    accept: 'file', //指定允许上传时校验的文件类型
                                    multiple: true, //是否允许多文件上传
                                    exts: 'xls|xlsx',
                                    auto: false, //是否选完文件后自动上传
                                    bindAction: '#testListAction', //指向一个按钮触发上传
                                    number: 10, //设置同时可上传的文件数量
                                    field: 'uploadExcel', //设定文件域的字段名
                                    choose: function (obj) {
                                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                                        //读取本地文件
                                        obj.preview(function (index, file, result) {
                                            var tr = $(['<tr id="upload-' + index + '">',
                                            '<td>' + file.name + '</td>',
                                            '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
                                                '<td>等待上传</td>',
                                                '<td>',
                                                '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                                '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                                '</td>',
                                                '</tr>'].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) {
                                        if (res.files.file) { //上传成功
                                            var tr = demoListView.find('tr#upload-' + index),
                                                tds = tr.children();
                                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                            tds.eq(3).html(''); //清空操作
                                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                                            layer.close(opera);
                                        }
                                        this.error(index, upload);
                                    },
                                    error: function (index, upload) {
                                        var tr = demoListView.find('tr#upload-' + index),
                                            tds = tr.children();
                                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                                    }
                                });
                        })

                        // 关闭批量导入弹窗
                        window.closeUpload = function () {
                            layer.close(opera);     //执行关闭   
                        }

                    }
                });

欢迎访问微信小程序“WEB前端宝典”，高频面试题，面试必备。