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>
|