<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover">
<title>多文件上传平台</title>
<LINK href="https://www.roboa.cn/favicon.ico" rel="shortcut icon">
<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="applicable-device" content="pc,mobile">
<meta name="MobileOptimized" content="width"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
<script type="text/javascript" src="./js/jquery.min.3.1.4.js"></script>
<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
<style>
.progress {
margin: 0 auto;
width: auto;
height: 15px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
/* 初始状态设置进度条宽度为0px */
.progress-bar{
width: 0px;
height: 100%;
background-color: yellowgreen;
transition: all .3s ease;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap-container">
<fieldset class="layui-elem-field layui-field-title" style="margin-top:5px;">
<legend style="font-size:16px;color:#ff4f00;">多文件上传平台</legend>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top:5px;">
<legend style="font-size:16px;color:#497945;white-space:pre-line;word-wrap:break-word;word-break: break-all;">支持:视频,音频,文档,压缩文件 最大支持4G文件</legend>
</fieldset>
<table class="layui-table" id="tb">
<colgroup>
<col width="100">
<col class="hidden-xs" width="100">
<col class="hidden-xs" width="100">
<col class="hidden-xs" width="100">
<col>
<col width="80">
<col width="130">
</colgroup>
<thead>
<tr>
<th width="18%;">文件名</th>
<th width="15%;">大小</th>
<th width="15%;">进度</th>
<th width="15%;">状态</th>
<th width="30%;">操作</th>
</tr>
</thead>
<tbody id="demoList">
</tbody>
</table>
<div class="layui-form layui-form-pane" style="margin-top:-10px;padding:10px;">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
<button type="button" id="offing" class="layui-btn layui-btn-primary">重新开始</button>
<!--必须按照"BY", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"字样,否则会出错字母不分大小写-->
<input type="text" id="limtssize" value="2MB" style="display:none;" readonly><!--上传读取默认2MB-->
<input type="text" id="maxsize" value="4GB" style="display:none;" readonly><!--上传文件限制最大默认4GB-->
<input type="text" id="filenumber" value="5" style="display:none;" readonly><!--上传限制个数-->
<input type="text" id="quality" value="0.6" style="display:none;" readonly><!--上传成功过后自动识别压缩图片比例-->
<input type="text" id="upurl" value="./upload.php" style="display:none;" readonly><!--上传接口-->
<input type="text" id="saveurl" value="./upload.php" style="display:none;" readonly><!--上传成功后保存数据库文件名-->
<input type="text" id="delfileurl" value="./upload.php" style="display:none;" readonly><!--上传成功后删除文件-->
<input type="text" id="exts" value="mp4|mp3|mkv|m4a|3gp|avi|ts|wma|flv|swf|jpg|jpeg|png|gif|bmp|doc|docx|xls|xlsx|zip|rar|7z|txt" style="display:none;" readonly><!--上传格式限制-->
<hr class="layui-bg-gray">
</div>
<script src="./js/upload.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/roboa_tool.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
资源下载:Layui多文件,大文件上传模板-Javascript文档类资源-CSDN下载
演示:http://yunpan.roboa.cn/
测试账号密码:test