Layui 文件上傳失敗點【重傳】Table列表重複顯示的問題

這個Layui問題Layui沒有完善

 

    var flag_file = [];;//先在全局變量當中聲明一個數組用來存已經有的文件名

 

我們首先定義這一個全局的變量，專門用來存放Table中的文件索引   就是 obj.preview(function (index, file, result) 方法中的 index

 

   //文件上傳
            function initFileList() {
 
                //多文件列表示例
                var demoListView = $('#demoList')
                    , uploadListIns = upload.render({
                        elem: '#upFileList'
                        , url: localStorage.getItem("ServerPath") + 'File/PostFiles?UsersId=' + JSON.parse(localStorage.getItem("UserData")).UsersId //改成您自己的上傳接口
                        , accept: 'file'
                        , multiple: true
                        , auto: true
                        , choose: function (obj) {
                            var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
                            //讀取本地文件
                            obj.preview(function (index, file, result) {
 
 
                                var tr = $(['<tr id="upload-' + index + '">'
                                    , '<td>' + fileidx++ + '</td>'
                                    , '<td>' + file.name + '</td>'
                                    , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                                    , '<td><span style="color:red">隊列中</span></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>'
                                    , '<td></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 值，以免刪除後出現同名文件不可選
                                });
 
                       // <!--重要部分-->
 
                                var flag = 0;
                                for (var i = 0; i < flag_file.length; i++) {
                                    if (flag_file[i] == index) {
                                        flag = 1;
                                    }
                                }
 
                                if (flag == 0) {
                                    flag_file.push(index);
                                    demoListView.append(tr);
 
                                }
 
                                   // <!--重要部分結束-->
 
 
                            });
                        }
                        , done: function (res, index, upload) {
 
                            if (res.code == 0) {//上傳成功
                                var tr = demoListView.find('tr#upload-' + index)
                                    , tds = tr.children();
 
                                tds.eq(3).html('<span style="color: #5FB878;">' + res.msg + '</span>');
                                tds.eq(4).html(res.data);
                                tds.eq(5).html('<button class="layui-btn layui-btn-xs layui-btn-danger demo-drop">取消</button>'); //清空操作
                                //已經上傳的文件排除上傳
                                tr.find('.demo-drop').on('click', function () {
                                    var indexArrt = index.split('-');
                                    var delIndex = parseInt(indexArrt[1]);
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除後出現同名文件不可選
                                });
                                return delete this.files[index]; //刪除文件隊列已經上傳成功的文件
                            } else {//上傳失敗
                                this.error(index, upload, res);
                            }
                        }
                        , error: function (index, upload, res) {
                            var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                            tds.eq(3).html('<span style="color: #FF5722;">' + res.msg + '</span>');
                            tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
                        }
                    });
            } 

這個是我在官方那列拿到的demo

 

 

 , done: function (res, index, upload) 

done方法基本不用處理，裏面res.code是我在服務器上面定義的數據格式這個不需要管

 

 

主要核心代碼在

obj.preview(function (index, file, result) 

方法中。

核心代碼

                               // <!--重要部分-->

                                var flag = 0;
                                for (var i = 0; i < flag_file.length; i++) {
                                    if (flag_file[i] == index) {
                                        flag = 1;
                                    }
                                }

                                if (flag == 0) {
                                    flag_file.push(index);
                                    demoListView.append(tr);

                                }

                                   // <!--重要部分結束-->

說明一下變量的作用：

 

flag表示判斷Table是否已經存在這個文件

flag_file 已經存在的文件數組

 

我們通過For循環判斷是否存在該文件，如果已經有了那麼 flag的值改爲1

等我們跳出for之後再判斷flag的值，如果是1的話就不再追加Table的tr

如果是0則代表沒選擇過該文件就追加

我們是提前把文件傳到服務器中，通過按鈕觸發你的數據表單的時候把GUID名稱獲取出來

  //附件列表
        var fileList = [];        
    //獲取Tables中的文件GUID名稱

      
            function getTdValue() {
                var tableId = document.getElementById("demoList");
                    fileList = [];//情況數組準備重新獲取
                for (var i = 1; i < tableId.rows.length; i++) {
                    fileList.push(tableId.rows[i].cells[3].innerHTML);
                }
            }