layui 多文件大文件切片上传,图片自动压缩

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

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值