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

插件预览效果：

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

需要初始化的layui组件：upload，element

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 fileList = [];
//初始化组件
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"))
    });
})
//设置附件列表（用于组件回显）
function setAnnex(formData) {
    let AnnexList = formData.F_Annex.split(',');
    let AnnexNameList = formData.F_AnnexName.split(',');
    let AnnexFileSizeList = formData.F_AnnexFileSize.split(',');
    if ((AnnexList && AnnexList.length > 0) &&
        (AnnexNameList && AnnexNameList.length > 0) &&
        (AnnexFileSizeList && AnnexFileSizeList.length > 0)
    ) {
        let htmlTxt = '';
        AnnexList.forEach(function (item, index) {
            fileList.push({
                src: item,
                name: AnnexNameList[index],
                size: AnnexFileSizeList[index]
            })
            htmlTxt += '<tr data-src="' + item + '">';
            htmlTxt += '<td>' + AnnexNameList[index] + '</td>';
            htmlTxt += '<td>' + (AnnexFileSizeList[index] / 1024).toFixed(1) + 'kb</td>';
            htmlTxt += '<td><div class="layui-progress" ><div class="layui-progress-bar" lay-percent="100%"></div></div></td>';
            htmlTxt += '<td><button class="layui-btn layui-btn-xs table-preview " onclick="showAnnex(\'' + item + '\')">下载</button><button class="layui-btn layui-btn-xs layui-btn-danger table-delete">删除</button></td>';
            htmlTxt += '</tr>';
        });
        $("#ID-upload-demo-files-list").empty();
        $("#ID-upload-demo-files-list").append(htmlTxt);
        element.render('progress'); // 渲染新加的进度条组件
        // $("#F_Annex").val(imageList.join(','));
    }
}
//监听提交
form.on('submit(saveBtn)', function (data) {
    var postData = data.field;
    if (goodSelectList && goodSelectList.length > 0) {
        postData.F_GoodIds = goodSelectList.join(',')
    }
    else {
        postData.F_GoodIds = ''
    }
    postData.F_SupplierId = F_SupplierId;
    if (fileList && fileList.length > 0) {
        postData.F_Annex = ''
        postData.F_AnnexName = ''
        postData.F_AnnexFileSize = ''
        fileList.forEach(function (item) {
            postData.F_Annex += item.src + ','
            postData.F_AnnexName += item.name + ','
            postData.F_AnnexFileSize += item.size + ','
        });
        postData.F_Annex = postData.F_Annex.substring(0, postData.F_Annex.length - 1)
        postData.F_AnnexName = postData.F_AnnexName.substring(0, postData.F_AnnexName.length - 1)
        postData.F_AnnexFileSize = postData.F_AnnexFileSize.substring(0, postData.F_AnnexFileSize.length - 1)
    }
    else {
        postData.F_Annex = ''
        postData.F_AnnexName = ''
        postData.F_AnnexFileSize = ''
    }
    
    
    
    common.submitForm({
        url: '/goodManage/Contract/SubmitForm?keyValue=' + keyValue,
        param: postData,
        success: function () {
            common.parentreload('data-search-btn');
        }
    })
    return false;
});
//下载方法
function showAnnex(path) {
    window.open(window.location.origin + path)
}

附：在watercloud框架中，增加警告回调（警告回调：超出文件大小或数量限制时的回调）

//在layui的upload的组件脚本中，找到以下代码并增加注释行

if (options.number && that.fileLength > options.number) {
    options.warning && options.warning(args);//增加警告信息回调操作
    return that.msg(typeof text['limit-number'] === 'function'
        ? text['limit-number'](options, that.fileLength)
        : (
            '同时最多只能上传: ' + options.number + ' 个文件'
            + '<br>您当前已经选择了: ' + that.fileLength + ' 个文件'
        ));
}

//页面脚本中在upload.render初始化时增加warning参数
warning: function (obj) {
    console.log('warning', obj)
},