#@iframe_layout()
#define main()

<div id="mainContent">
    <div class="layui-upload">
        #if(type == '1')
        <div class="layui-btn-group" style="float: right;margin-bottom: 5px;margin-right: 5px">
            <button type="button" class="layui-btn layui-btn-sm" id="testList">选择多文件</button>
            <button type="button" class="layui-btn layui-btn-sm" id="testListAction">开始上传</button>
        </div>
        #end
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr><th>文件名</th>
                    <th>大小</th>
                    #if(type == '1')<th>状态</th>#end
                    <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>
</div>



#end

#define js()
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //多文件列表示例
        var demoListView = $('#demoList');
        getAttachmentList();
        var uploadListIns = upload.render({
            elem: '#testList'
            ,url: 'uploadAttachment?entryId=#(entryId)'
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,size:#(size)*1024
            #if(exts),exts:'#(exts)'#end
            ,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(0) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-download layui-hide">下载</button>'
                        ,'<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(){
                        var attachmentId = $(tr).attr("attachmentId");
                        if(attachmentId != null){
                            //调取后台接口删除
                            delAttachment(attachmentId,tr)
                        }else{
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        }
                    });

                    //下载
                    tr.find('.demo-download').on('click', function(){
                        var attachmentId = $(tr).attr("attachmentId");
                        if(attachmentId != null){
                            window.location.href = '#(ctx)/attachment/downloadAttachment?attachmentId=' + attachmentId;
                        }
                    });

                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                console.log(res)
                if(res.code == 'success') { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    //tds.eq(3).html(''); //清空操作
                    $(tr).attr("attachmentId",res.attachmentId);
                    tds.eq(3).find('.demo-download').removeClass('layui-hide'); //显示下载

                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(res,index, upload);
            }
            ,error: function(res,index, upload){
                layer.alert("上传失败!"+(res.msg?res.msg:''),{icon:5})
                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'); //显示重传
            }
        });


        function getAttachmentList(){
            AjaxTool.XGet("#(ctx)/attachment/getAttachmentList?entryId=#(entryId)", null,
                function(data) {
                    if(data.code == 'success'){
                        for(var i=0; i< data.data.length; i++){
                            var tr = $(['<tr id="" attachmentId="'+data.data[i].attachment_id+'">'
                                ,'<td>'+ data.data[i].attachment_name+'</td>'
                                ,'<td>'+ data.data[i].attachment_size +'kb</td>'
                                #if(type == '1'),'<td><span style="color: #5FB878;">上传成功</span></td>'#end
                                ,'<td>'
                                ,'<button class="layui-btn layui-btn-xs demo-download ">下载</button>'
                                ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete #if(type == "2") layui-hide #end">删除</button>'
                                ,'</td>'
                                ,'</tr>'].join(''));

                            //删除
                            tr.find('.demo-delete').on('click', function(){
                                var $tr = $(this).parents("tr")[0];
                                //获取attachmentId
                                var attachmentId = $($tr).attr("attachmentId");
                                if(attachmentId != null){
                                    //调取后台接口删除
                                    delAttachment(attachmentId,$tr)
                                }
                            });

                            tr.find('.demo-download').on('click', function(){
                                var $tr = $(this).parents("tr")[0];
                                //获取attachmentId
                                var attachmentId = $($tr).attr("attachmentId");
                                if(attachmentId != null){
                                    window.location.href = '#(ctx)/attachment/downloadAttachment?attachmentId=' + attachmentId;
                                }
                            });

                            demoListView.append(tr);
                        }
                    }else{
                        layer.msg('加载附件列表失败!'+(data.msg?data.msg:''),{time: 1000});
                    }
                },
                function(data) {
                    layer.msg('加载附件列表失败，您可能已掉线，请刷新页面或关闭后重试！!'+(data.msg?data.msg:''),{time: 1000});

            });
        }

        function delAttachment(attachmentId,$tr){
            var param = {"attachmentId":attachmentId};
            AjaxTool.XPost("#(ctx)/attachment/delAttachment", param,
                function(data) {
                    if(data.code == 'success'){
                        $tr.remove();
                    }else{
                        layer.msg('删除附件失败!'+(data.msg?data.msg:''),{time: 1000});
                    }
                },
                function(data) {
                    layer.msg('删除附件失败，您可能已掉线，请刷新页面或关闭后重试！!'+(data.msg?data.msg:''),{time: 1000});

                });
        }
    });

</script>
#end