导航栏

文章

  • 首页
  • 查看历史

导航栏

  • 登陆
    • 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("上传成功!");

                   }

               }

           });

       });

   });



推荐

【亲测】laravel 里面 where 条件的in查询方法 【亲测】

2021-09-26 17:18:32

河北唐山市委政法委书记回应烧烤店打人事件:嫌疑人已锁定正在抓捕

2022-06-10 17:56:07

【亲测】Clash For Windows 客户端中文汉化教程【亲测】

2022-04-14 15:53:23

搬砖网 【https://www.xsjic.com/】大部分源码都不存在,大家别支付了- 谨防上单受骗

2021-01-19 15:40:48

苹果WWDC2019:五大系统集齐,将建立统一应用平台

2020-06-02 14:20:38

努比亚120W氘锋氮化镓充电器重磅发布,各家数码产品皆可快冲

2020-07-24 11:01:31

中国首款5G平板来了,明天正式上市!

2020-06-02 15:31:56

【亲测】linux中添加ftp用户,并设置相应的权限【亲测】

2020-07-29 13:31:46

坚果手机没了!字节跳动暂停手机相关业务,坚果R2刚宣布将大降价

2021-01-18 15:58:29

【亲测】Nginx监听的IP及端口号的设置【亲测】

2020-07-24 11:25:50

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