宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-20

如下所示:

div id=' uploadPatchForm ' style=' display : none ' class=' roundRect ' div id=' uploadLoadingDiv ' div class=' layui-progress ' lay-show percent=' true ' lay-filter=' demo ' div class=' layui-progress-bar layui-BG-red ' lay-percent=' 0% '/div/div/form class=' layui-form ' enctype=' multipart/form-data ' div class=' layui-form-item layui-formI class='layui-icon'/i/button/div div class=' layui-form-item ' div class=' layui-input-block ' input type=' radio ' name=' upgrade type ' value=' 30011001 ' title='手动升级输入类型='收音机'名称='upgradeType '值='30011002 '标题='自动升级checked/div/div class=' layui-form-item ' div class=' layui-input-block ' a class=' roundCornerDiv aLineGray ' href=' JavaScript : layer。close all();'rel='外部无跟随' span type=' reset ' class=' ButtonText Popupclosebtn '取消/span/aa class=' roundCornerDiv alinerage ' button class=' button text submit BTN ' type=' button ' id=' test9 '立即提交/button/a/div/div/form/div layui。使用([' upload ',' element ',' layer'],function(){ var upload=layui。上传,元素=layui.element,图层=layui.layervar计时器;//定义一个计时器//选完文件后不自动上传上传。render({ elem : ' # test8 ',url: 'upload ',async: false,method: 'post ',data : {升级类型: function(){ return $(' input[name='升级类型']: checked ').val();//额外传递的参数} },auto: false,accept: 'file' //普通文件,exts: 'zip' //只允许上传压缩文件,field:'uploadFile ',bindAction: '#test9 ',选择:函数{//这里的作用是截取上传文件名称并显示var uploadFileInput=$(' .layui-上传-文件')。val();var uploadFileName=uploadfile input。拆分(' ');$('#uploadName ').文本(上传文件名[上传文件名。长度-1]);},在:之前函数{ //obj)参数包含的信息,跟选择回调完全一致层。load();//上传加载变量n=0;定时器=设置间隔(函数(){//按照时间随机生成一个小于95的进度,具体数值可以自己调整n=n数学。random()* 10 | 0;if(N95){ n=95;clearInterval(计时器);} element.progress('demo ',n ' % ');},50数学。random()* 100);},done:函数(res){clearInterval(定时器);element.progress('demo ',' 100% ');//一成功就把进度条置为100%分层。close all();layer.msg('上传成功');},错误:函数(索引,上传){element.progress('demo ',' 0% ');层。close all();//关闭所有层layer.msg('上传更新包失败');}});});哎,好难调格式!

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

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

更多资讯
游戏推荐
更多+