119 lines
4.8 KiB
HTML
119 lines
4.8 KiB
HTML
<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"></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> |