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 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
Script的加载方法小结
Jan 12 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
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
帝国cms目录结构分享
2015/07/06 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python 搜索大文件的实例代码
2019/07/08 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
django 单表操作实例详解
2019/07/30 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
求职信模板标准格式范文
2014/02/23 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
毕业实习感受与体会
2015/05/26 职场文书