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

插件预览效果:

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

html代码:

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>

脚本代码:

javascript 复制代码
//初始化组件
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"))
    });
})
相关推荐
雪碧聊技术15 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了17 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down