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 相关文章推荐
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
Vue自定义全局弹窗组件操作
Aug 11 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的类树(支持无限分类)
2006/10/09 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
yii上传文件或图片实例
2014/04/01 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
详解webpack2+React 实例demo
2017/09/11 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python 自动提交和抓取网页
2009/07/13 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
小学生纪律委员竞选稿
2015/11/19 职场文书
《法国号》教学反思
2016/02/22 职场文书
MySQL开启事务的方式
2021/06/26 MySQL