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

原创

已于 2025-02-08 18:25:06 修改 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

于 2024-10-11 11:12:21 首次发布

插件预览效果：

需要引入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&g