【layui】多文件上传组件实现

插件预览效果：

需要引入layui的脚本文件layui.js和样式文件layui.css

html代码：

<div class="layui-input-block">
    
    <div class="layui-upload-list">
        <table class="layui-table">
            <colgroup>
                <col style="min-width: 100px;">
                <col width="150">
                <col width="260">
                <col width="150">
            </colgroup>
            <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>上传进度</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="ID-upload-demo-files-list"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn layui-btn-normal" id="upload">选择多文件</button>
    <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
</div>

脚本代码：

//初始化组件
var uploadListIns = upload.render({
    elem: '#upload',
    elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
    url: '/FileManage/Uploadfile/Upload', // 实际使用时改成您自己的上传接口即可。
    accept: 'file',
    multiple: true,
    number: 10,
    auto: false,
    bindAction: '#ID-upload-demo-files-action',
    data: { filetype: 3 },//接口参数
    choose: function (obj) {
        var that = this;
        var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
        console.log('obj.pushFile()', obj.pushFile())
        // 读取本地文件
        obj.preview(function (index, file, result) {
            var tr = $(['<tr id="upload-' + index + '">',
            '<td>' + file.name + '</td>',
            '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
            '<td class="progressContent"><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                '<td class="operate">',
                // '<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(''));


            // 单个重传
            $("body").delegate('#upload-' + index + " .demo-reload", "click", function () {
                var progress = '<div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div>'

                element.progress('progress-demo-' + index, '0%');

                obj.upload(index, file);
            });
            // 删除
            $("body").delegate(".demo-delete", "click", function () {
                delete files[index]; // 删除对应的文件
                tr.remove(); // 删除表格行
                // 清空 input file 值，以免删除后出现同名文件不可选
                uploadListIns.config.elem.next()[0].value = '';
            });

            that.elemList.append(tr);

            element.render('progress'); // 渲染新加的进度条组件
        });
    },
    done: function (res, index, upload) { // 成功的回调
        var that = this;
        if (res.code == 0) { // 上传成功
            console.log('done-success', res, index, upload)

            var tr = that.elemList.find('tr#upload-' + index)
            var tds = tr.children();
            tds.eq(3).html(''); // 清空操作
            var td = $([
                '<button class="layui-btn layui-btn-xs table-preview " onclick="showAnnex(\'' + res.data[0].src + '\')">下载</button>',
                '<button class="layui-btn layui-btn-xs layui-btn-danger table-delete">删除</button>'].join(''));

            $("#upload-" + index).find(".operate").empty();
            // console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))
            $("#upload-" + index).find(".operate").append(td);
            $("#upload-" + index).attr("data-src", res.data[0].src)
            fileList.push({
                src: res.data[0].src,
                name: this.files[index].name,
                size: res.data[0].size,
            })
            console.log('fileList', fileList)
            delete this.files[index]; // 删除文件队列已经上传成功的文件
            return;
        }
        else {
            console.log('done', res, index, upload)
            var td = $([
                '<button class="layui-btn layui-btn-xs demo-reload ">重传</button>',
                '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'].join(''));

            $("#upload-" + index).find(".operate").empty();
            // console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))
            $("#upload-" + index).find(".operate").append(td);
            this.error(index, upload);
        }

    },
    allDone: function (obj) { // 多文件上传完毕后的状态回调
        console.log(obj)
    },
    error: function (index, upload) { // 错误回调
        var that = this;
        var tr = that.elemList.find('tr#upload-' + index);
        var tds = tr.children();
        // 显示重传
        tds.eq(3).find('.demo-reload').removeClass('layui-hide');
    },
    progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增
        element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比
    }
});
//删除按钮事件
$("body").delegate(".table-delete", "click", function () {
    let src = $(this).parents('tr').attr("data-src")
    console.log('delete', src)
    let deleteIndex = -1;
    fileList.forEach(function (item, index) {
        if (item.src == src) {
            deleteIndex = index
        }
    })
    if (deleteIndex != -1) {
        fileList.splice(deleteIndex, 1)
    }
    $(this).parents('tr').remove();
});
//开始上传按钮事件
$("body").delegate("#ID-upload-demo-files-action", "click", function () {
    $("#ID-upload-demo-files-list tr").each(function (index, item) {
        if ($(item).attr("data-src") == undefined || $(item).attr("data-src") == 'undefined') {
            $(item).find(".operate").empty();
        }
        // console.log(' $(item).attr("src")', $(item).attr("data-src"))
    });
})