first commit

2025-06-25 10:53:11 +08:00
commit 9f374011ae
1240 changed files with 181139 additions and 0 deletions
@@ -0,0 +1,119 @@
+<div class="layui-upload">
+    <div class="layui-upload-list">
+        <table class="layui-table">
+            <thead>
+                <tr>
+                    <th>文件名</th>
+                    <th>大小</th>
+                    <th>状态</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="demoList"></tbody>
+        </table>
+    </div>
+    <div class="uploaddemo">
+        <div class="layui-upload-drag" id="testList">
+            <i class="layui-icon">&#xe67c;</i> 直接拖拽文件到这里
+        </div>
+    </div>
+    <div class="uploadbtn">
+        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
+    </div>
+</div>
+
+
+<script src="{__STATIC__}/jquery.min.js"></script>
+<script src="{__METE__}/layui/layui.js"></script>
+<link rel="stylesheet" href="{__METE__}/layui/css/layui.css" />
+<link rel="stylesheet" href="{__METE__CSS__}/style.css" />
+<script>
+    layui.use(["upload", "element"], function () {
+        var upload = layui.upload;
+        var element = layui.element;
+
+        //多文件列表示例
+        var demoListView = $("#demoList"),
+            uploadListIns = upload.render({
+                elem: "#testList", // 修改为拖拽区域
+                url: "/api/index/upload_picbed",
+                accept: "file", //文件类型
+                multiple: true,
+                auto: false,
+                bindAction: "#testListAction",
+                choose: function (obj) {
+                    var files = (this.files = 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>等待上传</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("")
+                        );
+
+                        //单个重传
+                        tr.find(".demo-reload").on("click", function () {
+                            obj.upload(index, file);
+                        });
+
+                        //删除
+                        tr.find(".demo-delete").on("click", function () {
+                            delete files[index]; //删除对应的文件
+                            tr.remove();
+                            uploadListIns.config.elem.next()[0].value = ""; //再次渲染上传框
+                        });
+
+                        demoListView.append(tr);
+                    });
+                },
+                done: function (res, index, upload) {
+                    var tr = demoListView.find("tr#upload-" + index);
+                    var tds = tr.children();
+                    if (res.code === 200) {
+                        // 关闭提示框
+                        layer.closeAll("msg");
+
+                        // 上传成功
+                        tds.eq(2).html('<span style="color: #5FB878;">' + res.msg + '</span>'); // 显示成功消息
+                        tds.eq(3).html(""); // 清空操作
+
+                        delete this.files[index]; // 删除文件队列已经上传成功的文件
+
+                        // 显示上传成功提示
+                        layui.layer.msg("上传成功", {
+                            time: 1000, //设定1秒后自动关闭
+                            end: function() {
+                                location.reload(); // 刷新页面
+                            }
+                        });
+                    } else {
+                        // 上传失败
+                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
+                        tds.eq(3).find(".demo-reload").removeClass("layui-hide"); //显示重传
+
+                        // 显示上传失败提示
+                        layui.layer.msg("上传失败");
+                    }
+                },
+
+                error: function (index, upload, res) {
+                    var tr = demoListView.find("tr#upload-" + index),
+                        tds = tr.children();
+                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
+                    tds.eq(3).find(".demo-reload").removeClass("layui-hide"); //显示重传
+
+                    // 显示上传失败提示
+                    layui.layer.msg("上传失败");
+                },
+            });
+    });
+</script>