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

已于 2022-07-06 17:48:41 修改
阅读量575 收藏
点赞数 1
文章标签： html javascript layui php jquery
于 2022-05-15 22:44:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Via_ge/article/details/124789658
版权

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

 

 

 

Mr.Jang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui实现文件压缩上传_Layui上传图片并进行压缩.md
weixin_33724428的博客
12-29 1345
在工作中使用到layui，发现其上传功能并不是很适用于自己的项目。故此，借用其上传功能，自己将图片压缩并上传.Layui 上传图片官方文档：https://www.layui.com/doc/modules/upload.htmlHTML：```html上传图片```tips:不一定非要是input标签，无论是什么标签，layui upload是根据其 id 值进行操作的JS：```js//使用...
layui 压缩图片后，再上传的代码
quweiie的专栏
03-23 252
使用layui的上传组件,压缩图片后,再上传到后端.
LayUI多文件上传，支持历史上传预览
2301_79644036的博客
05-04 191
选择多文件
layui 文件实现分片上传和 断点续传 和 急速秒传 SpringBoot JAVA
这个柠檬有丶酸的博客
12-21 3305
一丶分片上传 分片上传 slice()这个方法功能是将一个文件切割为一系列特定大小的小数据片，分别将这些小数据片分别上传到服务端，全部上传完后再由服务端将这些小数据片合并成为一个完整的资源。 二 丶 断点续传 断点续传需要使用 MD5生成一个文件的唯一码，后台数据库会存下上传记录也就是分片位置和总分片数。 思路就是每次上传之前先拿到MD5的唯一码去数据库查到文件的上传记录以及分片位置和总片数返回给前端从下一个分片开始上传。 三丶 急速秒传 上传之前去拿到MD5唯一码去查数据如果已经有了文件就返回给
layui多文件上传
最新发布
费马程序猿的博客
05-27 573
【代码】layui多文件上传。
使用Layui上传图片，并进行压缩
weixin_33866037的博客
06-07 1339
在工作中使用到layui，发现其上传功能并不是很适用于自己的项目。故此，借用其上传功能，自己将图片压缩并上传.Layui 上传图片官方文档：www.layui.com/doc/modules…HTML： <button type="button" class="layui-btn" id="test1"> <i class="layui-icon">&#xe67...
tp5+layui上传图片（图片压缩）
qq_33273556的博客
07-17 4768
使用的是Layui的css样式 h5代码： &lt;div class="controls need-img"&gt; &lt;p style="text-align: left;color: #ccc;margin-left: 0.26rem;margin-top: 0.26rem"&gt;亲！最多可上传4张图片哦。&lt;/p&gt; &lt;div class="add...
php tp5大文件分片上传，切片上传，结合layui上传插件，可上传4G文件
Trailbreaker
04-02 2673
php 大文件分片上传，结合layui上传插件 原理是将文件切成小文件，ajax递归上传，然后在后台再拼接成一个整的文件 html 页面 <div class="layui-upload"> <input type="file" style="display: none;" id="fileElem" ></input> <butto...
layui框架实战案例(22)：多附件上传实战开发实录(php后端、文件删除、数据库删除)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-19 845
在发布文章时，可以将附件上传至富文本编辑器，但是对文件删除时，无法将其从服务器删除。为了便于附件的管理，将附件上传管理，进行单独的项目开发。Layui是一个前端UI框架，它提供了多附件上传的组件，可以方便地在前端实现多附件上传功能。Layui多附件上传组件的使用方法非常简单，只需要加载相关的js和css文件，然后在HTML中定义上传的元素即可。Layui的多附件上传组件默认支持最多同时上传6个文件，可以通过设置number属性值来改变同时上传的文件数量。
实现多文件上传下载
weixin_63752931的博客
07-29 797
commons-fileupload-1.4 commons-io-1.4放在lib文件夹下面。2创建uploadFileServlet.需要文件上传下载的包。用雪花算法生成一个名称加文件后缀形成一个新的名字。其中所需雪花算法，需要创建一个工具类util,1利用layui上传组件，制作多文件上传表格。创建.jsp文件，layui的引用路径记得改。最后看上传的文件夹里面是否有自己上传的文件。
layui多图上传并压缩
Mr_ZhangAdd的博客
04-29 615
<form id="jxForm" method="post"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件 </button> <div class="layui-upload-list"> .
【layui】压缩图片image-conversion
Minions_Fatman的博客
06-24 490
image-conversion:一个简单易用的JS图像转换工具，可以指定大小以压缩图像
layui使用upload组件上传图片前的压缩
05-20 2347
对于很多情况，我们都有在前端压缩图片后再上传的需求，如果是单独的上传过程直接做就可以，但对于layui这种框架就需要注意下了。 具体方法如下（前端压缩图片我使用的是image compressor这个JS库）： upload.render({ elem: '#uploadpicbtn' , url: somewhere //必填项 , auto: false , choose: function (obj)
前端图片压缩上传（压缩篇）
前端开发博客
02-14 8923
为什么说这是一篇比较适合小白的前端图片压缩文章呢？因为我也是一个刚工作半年的前端小白，最近接到了一个前端图片压缩上传的任务，通过各种百度博客完成了这项任务，但是任务完成后对各种技术细节却...
layui在上传图片在前端处理图片压缩
各类程序设计成品、文档、学习资料
10-07 899
/停止原本的上传，如果多个文件，需要在读取完毕后将files里面的文件队列全删除。img.onload = function () { //图片加载完毕。//上传loading。//进行图片压缩，直接百度压缩方法。
Layui 多图片上传（躲坑）
weixin_44561119的博客
10-28 491
2、multiple: false，这个的解决思路就是：既然你自己自动上传有时间差，那我就人工抹平它（捂脸）。一次上传一张，这样就能手动控制好图片顺序和重复问题。Layui多图片上传时（即：multiple: true），多选图片会导致图片顺序打乱。这是由于Layui上传图片后返回结果有时间差。（但这对我这种需要处理图片的来说就很不友好， 于是有了下一个方法）
bufferimage 图片处理 质量_亲，你的图片超过2M了
weixin_34345947的博客
12-03 241
你好，在下充哥有事找充哥，充哥来攻克。微信动图2M的限制大小一直是新媒体运营人的痛点，为了让粉丝更直观了解PPT操作，充哥许多推文中均使用了动态Gif图展示。通常可以借助PS进行压缩处理，那有没有更快更方便的神器呢？这一篇推文列举了充哥经常用的5款免费动图压缩软件。01Gif工具之家网址：https://tool.gifhome.com特点：①界面简洁，功能齐全还包括视频转Gif、Gi...
js对图片进行压缩，并上传
weixin_40841731的博客
08-07 2144
以下代码，可以直接拷进html文件中，在浏览器打开即可看到效果。
layui 上传图片文件到钉钉服务器
csdn565973850的博客
04-03 1179
layui上传layui版本项目引入页面引入java后台接收参考文献 layui版本 首先先下载layui-2.5.6.zip包，解压后选择自己用到的文件放入项目中。 下载地址：https://download.csdn.net/download/csdn565973850/12299623 项目引入 我的项目中只用到了upload功能，其他未使用，所以引入如下： 页面引入 具体页面代码如下...
前端大文件为什么要切片上传
09-05
前端大文件切片上传是为了解决大文件上传过程中的一些问题。其中，主要原因有以下几点。 首先，大文件的上传会导致整个过程比较漫长，如果出现失败或中断，需要重新开始上传。切片上传可以将大文件切分成多个小块进行传输，这样即使其中一个切片传输失败，只需要重新传输该切片，而不需要重新上传整个文件。 其次，大文件的上传可能会消耗较长的时间，期间用户不能进行其他操作，也不能刷新页面。这可能导致上传过程中的超时问题，因为常见的软件应用在前端和后端都会对请求的时间进行限制。通过切片上传，可以将文件分成多个部分并并行上传，提高上传速度，减少超时失败的概率。 此外，切片上传还可以实现断点续传的功能。如果上传过程中出现中断，只需要从中断的位置开始重新上传，而不是从头开始。这样可以节省时间和带宽资源。 总结来说，前端大文件切片上传可以提高上传效率、降低失败概率，并实现断点续传的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [前端大文件上传如何实现（文件切片）](https://blog.csdn.net/m0_67948827/article/details/127579257)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Ajax原生前端文件（切片）上传附进度后端文件Express源码](https://download.csdn.net/download/funkstill/12157053)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值