Layui文件上传带进度条

最新推荐文章于 2024-06-29 08:31:59 发布

OpenSource_

最新推荐文章于 2024-06-29 08:31:59 发布

阅读量894

点赞数 2

文章标签： layui

原文链接：https://blog.csdn.net/qq_36311372/article/details/82117417?

版权

最近项目有个需求，要求文件上传有实时进度条，前端框架使用的是layui，但是layui的文件上传(upload)和进度条并没有做结合，这里只能靠改源码的方式实现之，折腾了蛮久，最后还是在公司前端的帮助下完成了，感谢。

1.修改layui文件上传ajax的代码：
这里使用的是layui(2.4.3版本)的非模块化（layui.all.js），模块化请修改modules/upload.js

直接复制粘接进去即可：

xhr:function () {
   var newXhr = i.ajaxSettings.xhr();
   // 给xhr的upload添加progress的监听
   newXhr.upload.addEventListener('progress' , function (e) {
       var percent = Math.floor(e.loaded / e.total * 100); //计算出进度
       typeof l.progress === 'function' && l.progress(e , percent); // 传递给upload的progress回调
   });
   return newXhr;
},

2.页面以及upload

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>文件上传进度条</title>
       <script src="../static/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script src="../static/layui.all.js" type="text/javascript" charset="utf-8"></script>
       <link rel="stylesheet" type="text/css" href="../static/css/layui.css" />
   </head>

   <body>
       <button type="button" class="layui-btn" id="chooseFile">
           <i class="layui-icon"></i>选择文件
       </button> 文件名称: <span id="fileName"></span>
       <div style="height: 20px;"></div>
       <button type="button" class="layui-btn" id="uploadBtn">
           <i class="layui-icon"></i>上传文件
       </button>
       <div style="height: 20px;"></div>
       <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
           <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
       </div>
       <script type="text/javascript">
           var upload = layui.upload,
               element = layui.element;
           element.init();


           upload.render({
               elem: '#chooseFile', // 文件选择
               accept:'file',
               url: '/fileUpload',
               auto: false, // 设置不自动提交
               bindAction: '#uploadBtn', // 提交按钮
               progress: function(e , percent) {
                   console.log("进度：" + percent + '%');
                   element.progress('progressBar',percent + '%');
               },
               choose: function(obj) {
                   obj.preview(function(index, file, result) {
                       $("#fileName").html(file.name);
                   });
               },
               done: function(res) {
                   layer.msg(res.msg);
               },
               error: function(res) {
                   layer.msg(res.msg);
               }
           });
       </script>
   </body>
</html>

测试：

OpenSource_

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Layui文件上传带进度条

最近项目有个需求，要求文件上传有实时进度条，前端框架使用的是layui，但是layui的文件上传(upload)和进度条并没有做结合，这里只能靠改源码的方式实现之，折腾了蛮久，最后还是在公司前端的帮助下完成了，感谢。1.修改layui文件上传ajax的代码：这里使用的是layui(2.4.3版本)的非模块化（layui.all.js），模块化请修改modules/upload.js直接复制粘接进去即可：xhr:function () { var newXhr = i.aja...
复制链接

扫一扫