Helius
2021-06-16 5728be2af515b2200e782aa201ca5d4d67d9ea47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!--# 
var name = name!"attachement";
var uploadURL = ctxPath+"/core/file/uploadAttachment.json";
var chooseId = name+"List";
var uploadId = name+"ListAction";
var filesListId = name+"DataList";
//加载已经在数据库列表
var files = (isNew=="true")?[]:core.file(batchFileUUID);
 
-->
<div class="layui-upload">
    <input type="hidden" name="${name}" value="${batchFileUUID}" ${isNotEmpty(layVerify)?('lay-verify="'+layVerify+'"'):''} />
    <button type="button" class="layui-btn layui-btn-normal"
        id="${chooseId}">选择多文件</button>
    
    <button type="button" class="layui-btn" id="${uploadId}">开始上传</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>文件名</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="${filesListId}">
                <!--# for(file in files){  -->
                  <tr>
                  <td>${file.id}</td>
                  <td>${file.name}</td>
                <td>成功</td>
                <td>
                    
                    <button class="layui-btn layui-btn-mini  layui-btn-danger demo-delete">删除</button>
                    <button class="layui-btn layui-btn-mini  demo-preview">预览</button>
                    <button class="layui-btn layui-btn-mini  demo-download">下载</button>
                </td>
              </tr>
                  <!--# }  -->
            </tbody>
        </table>
    </div>
 
</div>
 
<script>
var previewStr = '<button class="layui-btn layui-btn-mini demo-preview">预览</button>';
var deleteStr = '<button class="layui-btn layui-btn-mini  demo-delete layui-btn-danger">删除</button>';
var downloadStr ='<button class="layui-btn layui-btn-mini demo-download">下载</button>'
layui.use('upload',
function() {
    var $ = layui.jquery,
    upload = layui.upload;
    var demoListView = $('#${filesListId}'),
    uploadListIns = upload.render({
        elem: '#${chooseId}',
        url: '${uploadURL}',
        accept: 'file',
        multiple: true,
        auto: false,
        data: {
            "batchFileUUID": "${batchFileUUID}",
            "bizId":"${bizId!}",
            "bizType":"${bizType}"
        },
        bindAction: '#${uploadId}',
        choose: function(obj) {
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result) {
                var tr = $(['<tr id="${name}Upload-' + index + '">', '<td></td>', '<td>' + file.name + '</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-mini demo-reload  layui-hide">重传</button>', '<button class="layui-btn layui-btn-mini layui-btn-danger demo-cancel">取消</button>', '</td>', '</tr>'].join(''));
                //单个重传
                tr.find('.demo-reload').on('click',
                function() {
                    obj.upload(index, file);
                });
 
                //取消
                tr.find('.demo-cancel').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.code != 0) {
                this.error(index, upload);
                return
            } //上传成功
            var tr = demoListView.find('tr#${name}Upload-' + index),
            tds = tr.children();
            tds.eq(0).html(  res.data.id);
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(deleteStr+previewStr +downloadStr); //清空操作
            initTr(tr);
            return delete this.files[index]; //删除文件队列已经上传成功的文件
        },
        error: function(index, upload) {
            var tr = demoListView.find('tr#${name}upload-' + index),
            tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });
 
    var trs = demoListView.children();
    for (var i = 0; i < trs.length; i++) {
        initTr($(trs[i]));
    }
 
    function initTr(tr) {
            var tds = tr.children();
            var fileId = tds.eq(0).html();
            var fileName= tds.eq(1).html();
        tr.find('.demo-delete').on('click',function() {
            
            Common.post("/core/file/deleteAttachment.json", {
                "fileId": fileId,
                "batchFileUUID": "${batchFileUUID}"
            },
            function() {
                tr.remove();
                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                Common.info("删除成功");
            });
            return false;
 
        });
        //预览服务器文件
        tr.find('.demo-preview').on('click',
        function() {
            //文件下载地址
            var file = encodeURIComponent("http://" + window.location.host+"/core/file/download/"+fileId+"/${batchFileUUID}/"+fileName);
            //8012为预览服务器地址,参考 https://gitee.com/kekingcn/file-online-preview 安装
            Common.topOpenDlg("${env('file.previewURL')}?url="+file,fileName+"预览");
            //window.open("${env('file.previewURL')}?url="+file,fileName+"预览");
               return false;
        });
        
        //下载服务器文件
        tr.find('.demo-download').on('click',
        function() {
            //文件下载地址
            var address = "${ctxPath}/core/file/download/"+fileId+"/${batchFileUUID}/"+fileName;
            console.log(address);
               window.location.href=address;
               return false;
        });
    }
 
});
 </script>