layui扩展上传组件模拟进度条的方法


Posted in Javascript onSeptember 23, 2019

如下所示:

<div id="uploadPatchForm" style="display:none" class="roundRect"> 
  <div id="uploadLoadingDiv">
    <div class="layui-progress" lay-showpercent="true" lay-filter="demo" >
	  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
	</div>
  </div>
  <form class="layui-form" enctype="multipart/form-data">
	<div class="layui-form-item layui-upload">
	  <span id="uploadName" style="line-height: 3;"></span>
	  <button type="button" class="layui-btn layui-btn-normal" id="test8" style="float: right;">
        <i class="layui-icon">?</i>
      </button>
	</div>
	<div class="layui-form-item">
	  <div class="layui-input-block">
	    <input type="radio" name="upgradeType" value="30011001" title="手动升级">
	    <input type="radio" name="upgradeType" value="30011002" title="自动升级" checked>
	  </div>
	</div>
	<div class="layui-form-item">
	  <div class="layui-input-block">
		<a class="roundCornerDiv aLineGray" href="javascript:layer.closeAll();" rel="external nofollow" >
		  <span type="reset" class="ButtonText popupCloseBtn">取消</span>
		</a>
		<a class="roundCornerDiv aLineOrange">
	      <button class="ButtonText submitBtn" type="button" id="test9">立即提交</button>
	    </a> 
	  </div>
	</div>
  </form>
</div>
layui.use(['upload','element','layer'], function(){
	var upload = layui.upload,element = layui.element,layer = layui.layer;
	var timer;//定义一个计时器
	//选完文件后不自动上传
	upload.render({
	  elem: '#test8'
	  ,url: 'upload'
	  ,async: false
	  ,method: 'post'
	  ,data: {
	    upgradeType: function(){
		  return $("input[name='upgradeType']:checked").val();//额外传递的参数
	    }
	  }
	  ,auto: false
	  ,accept: 'file' //普通文件
	  ,exts: 'zip' //只允许上传压缩文件
	  ,field:'uploadFile'
	  ,bindAction: '#test9'
	  ,choose: function(obj){//这里的作用是截取上传文件名称并显示
		var uploadFileInput=$(".layui-upload-file").val();
		var uploadFileName=uploadFileInput.split("\\");
		$("#uploadName").text(uploadFileName[uploadFileName.length-1]);
	  }
	  ,before: function(obj){ //obj参数包含的信息,跟choose回调完全一致
		layer.load(); //上传loading
		var n = 0; 
		timer = setInterval(function(){//按照时间随机生成一个小于95的进度,具体数值可以自己调整
		  n = n + Math.random()*10|0; 
		  if(n>95){
			n = 95;
			clearInterval(timer);
		  }
		  element.progress('demo', n+'%');
		}, 50+Math.random()*100);
	  }
	  ,done: function(res){
		clearInterval(timer);
		element.progress('demo', '100%');//一成功就把进度条置为100%
		layer.closeAll(); layer.msg('上传成功');}  ,error: function(index, upload){element.progress('demo', '0%');layer.closeAll(); //关闭所有层layer.msg('上传更新包失败');  }});});

哎,好难调格式!

效果如下,截图工具反应迟钝看起来有点失真,实际测试是ok的:

layui扩展上传组件模拟进度条的方法

以上这篇 layui扩展上传组件模拟进度条的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解微信小程序缓存--缓存时效性
May 02 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
layer扩展打开/关闭动画的方法
Sep 23 #Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 #Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 #Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 #Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 #Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 #Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 #Javascript
You might like
第三节--定义一个类
2006/11/16 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript中this详解
2015/09/01 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
详解Python的Django框架中的中间件
2015/07/24 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
经典广告词大全
2014/03/14 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
银行招聘自荐信
2015/03/06 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
医学会议开幕词
2016/03/03 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书