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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
基于vue实现分页效果
2017/11/06 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
售后服务承诺书
2014/03/26 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
党支部工作总结2015
2015/04/01 职场文书
总结会主持词
2015/07/02 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Android Studio 计算器开发
2022/05/20 Java/Android