导航栏

文章

  • 首页
  • 查看历史

导航栏

  • 登陆
    • QQ登陆 微博登陆
  • 其他
    • 图标库
  • 夜间模式
  • 退出登录

【亲测】Layui自带进度条实例【亲测】


作者:科技小锅盖             时间:2020-7-22 17:42             站长QQ:1540217035

<link rel="stylesheet" href="__STATIC__/layui2.5.5/css/layui.css">

<div class="layui-form-item">

   <label class="layui-form-label">项目文件label>

   <div class="layui-input-block">

       <div class="layui-upload-drag" id="test10">

           <i class="layui-icon">i>

           <p>点击上传,或将文件拖拽到此处p>

       div>

   div>

   <br/>

   <div class="layui-progress" lay-filter="demo" lay-showPercent="true">

       <div class="layui-progress-bar" lay-percent="0%">

</div>

    </div>

</div>



JS:

<script src="__STATIC__/layui2.5.5/layui.js">script>  

路径改为自己的本地js路劲即可

<script>

   //注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作

   layui.use('element', function(){

       var element = layui.element;

       layui.use('upload', function(){

           var $ = layui.jquery

               ,upload = layui.upload;

               //拖拽上传

           var uploadInst =upload.render({

               elem: '#test10'

               ,url: "{:url('upload/upload_word')}"

               ,exts: 'doc|docx'

               ,progress: function(n){

                   var percent = n + '%' //获取进度百分比

                   //配合 layui 进度条元素使用(这是进度条的方法,这个方法放到element的方法中)

                   element.progress('demo', percent);

               }

               ,done: function(res){

                   if(res.code == 1){

                       success("上传成功!");

                   }

               }

           });

       });

   });



推荐

苹果或会在3月23日举办今年第一场发布会 AirTags追踪贴可能会现身

2021-03-09 09:22:46

三星Note10系列发布会除了手机,还有哪些硬件产品?

2020-06-02 14:21:24

【亲测】超级好用的工具网站推荐 【亲测】

2022-06-15 09:48:44

小米10 Pro+ 要来啦或采用今年最强快充组合

2020-07-30 17:15:14

【亲测】 Call to undefined function Illuminate\Filesystem\symlink() 【亲测】

2021-07-14 10:24:36

三星Note20系列正式发布:配置很顶级,但价格更贵了

2020-08-06 14:32:06

【亲测】composer1 更新文件报内存溢出:更新命令【亲测】

2021-09-29 19:14:40

【亲测】PHP如何快速的往MySQL插入百万级数据【亲测】

2021-08-13 17:30:43

【亲测】ab测压工具实例运行【亲测】

2021-09-03 14:39:06

【亲测】spotify 挂代理无法注册怎么办? 知道方法我懵了【亲测】

2022-02-14 15:35:16

陕ICP备2021003534号-1 科技小锅盖 保留所有权利 网站地图 站长QQ:1540217035
    友情链接:
  • 米醋儿
  • 笔墨