**

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);     //執行關閉   
                        }

                    }
                });