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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 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
咖啡的传说和历史
2021/03/03 新手入门
基于mysql的论坛(3)
2006/10/09 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
jQuery示例收集
2010/11/05 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
js实现登录验证码
2016/12/22 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python实现关键词提取的示例讲解
2018/04/28 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
企业宗旨标语
2014/06/10 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
教室布置标语
2014/06/26 职场文书
检讨书范文1000字
2015/01/28 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
《检阅》教学反思
2016/02/22 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python