layui多文件列表上传+上传中loading效果

描述

项目中实际使用的例子，不是单一个上传。

是添加公告、添加帖子等等模块中的一个功能。

从layui官网的例子做一些改动，没有进度条（太难了），而是在每一行加了loading效果。

此功能是选择文件后直接上传。

如果用的官网例子，选择文件先不上传的那种，改一下不难。

功能描述

点击选择文件按钮，选择文件后在表格追加一行，直接上传

上传中：

上传成功：

删除的是文件的id，入表时的关联字段，不需要可删除（官网例子中删除的是上传列表中的数据）

上传失败：

这里没图，就是状态为：上传失败，没有操作按钮（官网例子中有重传按钮功能）

 

 实施

attachmentId：字符串。如公告表中的字段attachmentId，表示关联的文件id（id+逗号）[1001,1002,1003,1004,]

html

<input>是用来放已上传文件的id（形如：attachmentId="id1,id2,id3,"），用来入表的。

<input type="text" id="attachmentId" style="display: none">
<div class="layui-form-item">
    <div class="layui-upload">

        <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>
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
    </div>
</div>

 js

layui.use(['upload'], function(){
        var upload = layui.upload;
        //多文件列表上传
        var attachmentId = "";//上传的文件id串
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: ...
            ,accept: 'file'
            ,multiple: true
            ,auto: true
            ,before: function(obj){
                
            }
            ,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/1014).toFixed(1) +'kb</td>'
                        ,'<td><i class="layui-icon layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i></td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete layui-hide">删除</button>'
                        ,'<input class="layui-hide" type="text" id='+index+'>'
                        ,'</td>'
                        ,'</tr>'].join(''));

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

                    demoListView.append(tr);
                    delete files[index];
                });

            }
            ,done: function(res, index, upload){
                var data = res;
                var attachmentId_tem = data.fileName + ",";
                $("#"+index).val(attachmentId_tem);
                attachmentId += (attachmentId_tem);
                $("#attachmentId").val(attachmentId);
                if("这里可以加上自己的判断"){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).find('.demo-delete').removeClass('layui-hide'); //显示删除
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                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>');
                return delete this.files[index];
            }

        });


    })

修改

在修改功能中，需要回显已上传列表，并且可以删除已上传文件。

把上面代码中的的id改一下就行，其他基本不用改，或者想办法复用上面的代码也可以，我自己没复用。

用attachmentId查出已上传的文件（或者说已关联的文件），下面是ajax请求中success中的处理。

success: function (res) {
    var data = res.list;
    for (var i=0;i<data.length;i++) {
        var tr = $(['<tr id="upload-'+ i +'">'
            ,'<td>'+ data[i].uploadFileName +'</td>'
            ,'<td>'+ data[i].fileSize +'kb</td>'
            ,'<td><span style="color: #5FB878;">已上传</span></td>'
            ,'<td>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete2">删除</button>'
            ,'<input class="layui-hide attId" value="'+data[i].id+'," type="text">'
            ,'</td>'
            ,'</tr>'].join(''));
        $('#demoList2').append(tr);

    }
    // 已有文件删除
    $('.demo-delete2').on('click', function(){
        var attachmentId2 = $("#attachmentId2").val();
        var tem = $(this).parents("tr").find(".attId").val();
        attachmentId2 = attachmentId2.replace(tem,"");
        $("#attachmentId2").val(attachmentId2);
        $(this).parents("tr").remove();
    });
}

 

结语

还有一些小的页面bug，自己多测一下（比如打开弹出层时先清空文件表格的html，否则上传之后关闭弹框再打开会出现上次的内容）

整个功能都围绕attachmentId，一定注意。

还有就是和进度条的集成，查出来的都是改源码那一套，试了好久没什么用，而且也不是实时进度，有好的方法可以交流。