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);
                }
            }