177 lines
6.3 KiB
HTML
177 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Demo</title>
|
||
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
|
||
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
|
||
<!-- <link rel="stylesheet" href="../../js/layui2.7.6/css/layui.css" media="all"/>-->
|
||
<style>
|
||
.layui-table th{
|
||
font-weight: bold;
|
||
text-align: center
|
||
}
|
||
.layui-table td{
|
||
text-align: center
|
||
}
|
||
#commit {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layui-upload">
|
||
<div style="margin-top: 10px;">
|
||
<button type="butto n" class="layui-btn" id="ID-upload-demo-files">选择多文件</button>
|
||
<span style="color:red;margin-left: 100px;">支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB</span>
|
||
</div>
|
||
<div class="layui-upload-list">
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="250">
|
||
<col width="150">
|
||
<col width="260">
|
||
<col width="150">
|
||
</colgroup>
|
||
<thead>
|
||
<th>文件名</th>
|
||
<th>大小</th>
|
||
<th>上传进度</th>
|
||
<th>操作</th>
|
||
</thead>
|
||
<tbody id="ID-upload-demo-files-list"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<textarea name="remark" id="remark" cols="145" rows="6"
|
||
style="border: 1px solid #dedede; border-radius: 10px;margin-left: 14%; margin-top: 5%;"></textarea>
|
||
</div>
|
||
<button type="submit" class="layui-btn subBtn" id="commit" lay-submit lay-filter="formDemo">提交</button>
|
||
</div>
|
||
|
||
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
|
||
<script src="../../js/jquery/jquery-3.6.0.js"></script>
|
||
<!--<script src="../../js/layui2.7.6/layui.js"></script>-->
|
||
<script src="../../layui-v2.8.18/layui/layui.js"></script>
|
||
<script type="text/javascript" src="../../js/jq.js"></script>
|
||
<script src="../../js/common_methon.js"></script>
|
||
<script type="text/javascript" src="../../js/publicJs.js"></script>
|
||
<script type="text/javascript" src="../../js/select.js"></script>
|
||
<script type="text/javascript" src="../../js/my/permission.js"></script>
|
||
<script>
|
||
layui.config({
|
||
base: '../../js/layuiModules/', // 第三方模块所在目录
|
||
version: 'v1.6.4' // 插件版本号
|
||
}).extend({
|
||
soulTable: 'notice,layNotify', // 模块
|
||
});
|
||
var notice;
|
||
var layNotify;
|
||
var proId = localStorage.getItem("proId");
|
||
layui.use(['notice', 'layNotify','upload','form'],function(){
|
||
var upload = layui.upload;
|
||
var element = layui.element;
|
||
notice = layui.notice;
|
||
layNotify = layui.layNotify;
|
||
var form = layui.form;
|
||
// 制作多文件上传表格
|
||
var uploadListIns = upload.render({
|
||
elem: '#ID-upload-demo-files',
|
||
elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
|
||
url: ctxPath + '/proProgress/upload', // 实际使用时改成您自己的上传接口即可。
|
||
accept: 'file', // 只允许上传文件
|
||
acceptMime: '.rar,.zip,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
|
||
exts: 'rar|zip|doc|docx|pdf', // 只允许上传指定格式的文件
|
||
size: 20 * 1024, // 限制文件大小，单位 KB
|
||
multiple: true,
|
||
number: 10,
|
||
auto: false,
|
||
bindAction: '#commit',
|
||
before: function(obj){
|
||
// 携带工程ID传入后端
|
||
this.data = {
|
||
associaId: proId,
|
||
remark: $("#remark").val()
|
||
};
|
||
},
|
||
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>'+ (file.size/1024/1024).toFixed(1) +'MB</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 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(); // 删除表格行
|
||
// 清空 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){ // 上传成功
|
||
var tr = that.elemList.find('tr#upload-'+ index)
|
||
var tds = tr.children();
|
||
tds.eq(3).html(''); // 清空操作
|
||
delete this.files[index]; // 删除文件队列已经上传成功的文件
|
||
return;
|
||
//}
|
||
this.error(index, upload);
|
||
},
|
||
allDone: function(obj){ // 多文件上传完毕后的状态回调
|
||
console.log(obj)
|
||
reloadTip("上传","上传成功",'success');
|
||
setTimeout(function () {
|
||
parent.layer.closeAll();
|
||
// window.parent.location.reload();
|
||
}, 2000);
|
||
},
|
||
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');
|
||
reloadTip("上传","上传失败",'error');
|
||
},
|
||
progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
|
||
element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
|
||
}
|
||
});
|
||
upload.render();
|
||
});
|
||
|
||
function reloadTip(tip,message,type){
|
||
layNotify.notice({
|
||
title: tip+"提示",
|
||
type: type,
|
||
message: message
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |