main
黄海 3 years ago
parent acba118cb3
commit 4c937cd913

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,2 +1 @@
/** layui-v2.5.6 MIT License By https://www.layui.com */ html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-view{display:block;position:relative;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#fafafa;color:#333;font-family:Courier New;font-size:13px}.layui-code-title{position:relative;padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee;font-size:12px}.layui-code-title>.layui-code-about{position:absolute;right:10px;top:0;color:#b7b7b7}.layui-code-about>a{padding-left:10px}.layui-code-view>.layui-code-ol,.layui-code-view>.layui-code-ul{position:relative;overflow:auto}.layui-code-view>.layui-code-ol>li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view>.layui-code-ol>li:first-child,.layui-code-view>.layui-code-ul>li:first-child{padding-top:10px}.layui-code-view>.layui-code-ol>li:last-child,.layui-code-view>.layui-code-ul>li:last-child{padding-bottom:10px}.layui-code-view>.layui-code-ul>li{position:relative;line-height:20px;padding:0 10px;list-style-type:none;*list-style-type:none;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-dark{border:1px solid #0c0c0c;border-left-color:#3f3f3f;background-color:#0c0c0c;color:#c2be9e}.layui-code-dark>.layui-code-title{border-bottom:none}.layui-code-dark>.layui-code-ol>li,.layui-code-dark>.layui-code-ul>li{background-color:#3f3f3f;border-left:none}.layui-code-dark>.layui-code-ul>li{margin-left:6px}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 300 KiB

After

Width:  |  Height:  |  Size: 299 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 701 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 300 KiB

File diff suppressed because one or more lines are too long

@ -2,18 +2,15 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>示例演示</title> <title>文档上传</title>
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../lib/layui/css/layui.css" rel="stylesheet"> <link href="../lib/layui/css/layui.css" rel="stylesheet">
<script src="../lib/layui/layui.js"></script>
</head> </head>
<body> <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>高级应用:制作一个多文件列表</legend>
</fieldset>
<div class="layui-upload"> <div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<div class="layui-upload-list" style="max-width: 1000px;"> <div class="layui-upload-list" style="max-width: 1000px;">
@ -38,12 +35,16 @@
<button type="button" class="layui-btn" id="testListAction">开始上传</button> <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div> </div>
<script src="../lib/layui/layui.js"></script>
<script> <script>
layui.use(['upload', 'element', 'layer'], function () { layui.use(['upload', 'element', 'layer', 'form', 'table', 'laydate', 'util'], function () {
var $ = layui.jquery var $ = layui.jquery
, upload = layui.upload , upload = layui.upload
, table = layui.table
, util = layui.util
, laydate = layui.laydate
, element = layui.element , element = layui.element
, form = layui.form
, layer = layui.layer; , layer = layui.layer;
//演示多文件列表 //演示多文件列表
var uploadListIns = upload.render({ var uploadListIns = upload.render({
@ -51,16 +52,18 @@
, elemList: $('#demoList') //列表元素对象 , elemList: $('#demoList') //列表元素对象
, url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。 , url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
, accept: 'file' , accept: 'file'
, acceptMime: "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
, exts: 'docx|doc' //只允许上传word文件
, multiple: true , multiple: true
, number: 3 , number: 10
, auto: false , auto: false
, bindAction: '#testListAction' , bindAction: '#testListAction'
, choose: function (obj) { , choose: function (obj) {
var that = this; let that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件 //读取本地文件
obj.preview(function (index, file, result) { obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">' let tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>' , '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>' , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
, '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>' , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
@ -87,26 +90,22 @@
}); });
} }
, done: function (res, index, upload) { //成功的回调 , done: function (res, index, upload) { //成功的回调
var that = this; let that = this;
//if(res.code == 0){ //上传成功 let tr = that.elemList.find('tr#upload-' + index)
var tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children(); , tds = tr.children();
tds.eq(3).html(''); //清空操作 tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件 delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload); this.error(index, upload);
} }
, allDone: function (obj) { //多文件上传完毕后的状态回调 , allDone: function (obj) { //多文件上传完毕后的状态回调
console.log(obj) console.log(obj)
} }
, error: function (index, upload) { //错误回调 , error: function (index, upload) { //错误回调
var that = this; let that = this;
var tr = that.elemList.find('tr#upload-' + index) let tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children(); , tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
} }, progress: function (n, elem, e, index) { //注意index 参数为 layui 2.6.6 新增
, progress: function (n, elem, e, index) { //注意index 参数为 layui 2.6.6 新增
element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比 element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
} }
}); });

Loading…
Cancel
Save