layui 多图片上传表格形式带删除

原创已于 2024-05-20 16:01:09 修改 · 397 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

于 2024-05-17 14:25:40 首次发布

要存储的图片地址是以逗号拼接后的字符串

<div id="div2" style="display:none;" class="layui-col-xs10 layui-form-item">
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-block layui-upload ">
                            <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">
                                选择图片
                            </button>
                            <div class="layui-upload-list">
                                <table class="layui-table">
                                    <colgroup>
                                        <col style="min-width: 100px;">
                                        <col width="150">
                                        <col width="150">
                                        <col width="260">
                                        <col width="150">
                                    </colgroup>
                                    <thead>
                                    <th>图片名</th>
                                    <th>预览图</th>
                                    <th>大小</th>
                                    <th>上传进度</th>
                                    <th>操作</th>
                                    </thead>
                                    <tbody id="ID-upload-demo-files-list"></tbody>
                                </table>
                            </div>
                            <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
                        </div>

<script>
    layui.use(['admin', 'form', 'laydate'], function () {
        var $ = layui.$,
            admin = layui.admin,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            element = layui.element,
            table = layui.table,
            picUrls = '',
            videoUrls = '',
            videoArr = [],
            picArr = [],
            videoIfOnTr = 0,
            picIfOnTy = 0
		// 制作多图片上传表格
        admin.req({
            url: layui.setter.api + '?m=score/spike',
            done: function () {
                form.render('select');
                var pic_urls = $("#pic_urls").val();
                if (pic_urls != '') {
                    var arr = pic_urls.split(",");
                    $.each(arr, function (i, item_url) {
                        picArr.push(item_url)
                        var tr = $(['<tr id="upload-">',
                            '<td>' + item_url + '</td>',
                            '<td><img src="' + item_url + '" alt="' + item_url + '" style="width: 90px; height: 90px;"></td>',
                            '<td>---</td>',
                            '<td>已上传</td>',
                            '<td>',
                            '<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(''));
                        $('#ID-upload-demo-files-list').append(tr);
                        // 删除
                        tr.find('.demo-delete').on('click', function () {
                            // delete arr[i]; // 删除对应的文件
                            picArr = picArr.filter(item => item !== item_url)
                            tr.remove(); // 删除表格行
                            picUrls = picArr.join(',')
                            layui.use('form', function () {
                                form.val('layuiadmin-form-role', {
                                    'data[pic_urls]': picUrls
                                })
                            })
                        });
                    })
                }
                // 绑定按钮点击事件 picIfOnTy 判断是否已经选择文件
                document.getElementById('ID-upload-demo-files-action').onclick = function(){
                    if (picArr.length === 0 && picIfOnTy === 0) {
                        layer.msg('请选择图片')
                    }
                };
                var uploadListIns = upload.render({
                    elem: '#ID-upload-demo-files',
                    elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
                    url: layui.setter.api + '?m=imagetool/upload_pic', // 实际使用时改成您自己的上传接口即可。
                    headers: {//通过 request 头传递   accesstoken->HTT`P_ACCESSTOKEN
                        token: layui.data('layuiAdmin').token
                    },
                    accept: 'image',
                    exts: 'png|gif|jpg|jpeg',
                    multiple: true,
                    number: 3,
                    auto: false,
                    bindAction: '#ID-upload-demo-files-action',
                    choose: function (obj) {
                        var that = this;
                        var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                        // 读取本地文件
                        obj.preview(function (index, file, result) {
                            var tr = $(['<tr id="upload-' + index + '">',
                                '<td>' + file.name + '</td>',
                                '<td><img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;"></td>',
                                '<td>' + (file.size / 1024 / 1024).toFixed(1) + 'M</td>',
                                '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                                '<td>',
                                '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                '<button id="del-' + index + '" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                '</td>',
                                '</tr>'].join(''));
                            picIfOnTy += 1
                            // 单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });

                            // 删除
                            tr.find('.demo-delete').on('click', function () {
                                picArr = picArr.filter(item => item !== $(this).val())
                                picUrls = picArr.join(',')
                                layui.use('form', function () {
                                    form.val('layuiadmin-form-role', {
                                        'data[pic_urls]': picUrls
                                    })
                                })
                                delete files[index]; // 删除对应的文件
                                tr.remove(); // 删除表格行
                                // 清空 input file 值，以免删除后出现同名文件不可选
                                uploadListIns.config.elem.next()[0].value = '';
                                picIfOnTy -= 1
                            });

                            that.elemList.append(tr);
                            element.render('progress'); // 渲染新加的进度条组件
                        });

                    },
                    done: function (res, index, upload) { // 成功的回调
                        var that = this;
                        // if(res.code == 0){ // 上传成功
                        var tr = that.elemList.find('tr#upload-' + index)
                        var tds = tr.children();
                        // 显示删除
                        tds.eq(3).find('.demo-delete').removeClass('layui-hide');
                        // 显示重传
                        // tds.eq(3).find('.demo-reload').removeClass('layui-hide');
                        delete this.files[index]; // 删除文件队列已经上传成功的文件
                        that.elemList.find('button#del-' + index).val(res.data['src'])
                        picArr.push(res.data['src'])
                        picUrls = picArr.join(',')
                        // 执行其他逻辑，例如将地址存储到隐藏域或显示图片等
                        layui.use('form', function () {
                            form.val('layuiadmin-form-role', {
                                'data[pic_urls]': picUrls
                            })
                        })

                        return;
                        //}
                        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 参数为 layui 2.6.6 新增
                        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
                        $('.layui-progress-bar').attr('lay-percent', n + '%');
                        element.init();
                        element.progress('progress-demo-', n + '%'); // 执行进度条。n 即为返回的进度百分比
                    }
                });
            }
            // }
        })
</script>