很郁闷,也跟着官方的开发文档理解后写了,可就是在progress进度回调函数中只能更新一次。在上传文件中,按照文档的用法是如下的:
<script>
layui.use('element', function(){
var element = layui.element;
var $ = layui.jquery;
});
var uploadInst = upload.render({
elem: '#uploadFile' //绑定元素
,url: '127.0.0.1:8080/data/upLoadFile' //上传接口
,accept: 'file' //允许上传的文件类型
,size: 716800 //最大允许上传的文件大小 这里为 700M
,auto:false
,bindAction:'#sureUpload'
// ,multiple:'true'
,drag:true
,data:{
'id':readyId
,'access_token':token
}
,progress: function(n, elem){
//官方文档中,在获取进度的回调函数中,是这样定义来连接进度条的
var percent = n + '%' //获取进度百分比
element.progress('demo1', percent);
}
</script>
但是这样的话,只能设置一次进度条的百分比,或者说 ,根本不能设置成功。演示:
在网上查阅相关的问题后,发现网上的也不能成功。于是自己在多次尝试后,将layui.use(‘element’,function(){});放置进度回调函数里面进行使用,而不是放在外面的初始化。否则就不能进行动态渲染。改变后的代码如下:
,progress: function(n, elem){
layui.use('element', function(){
var element = layui.element;
var $ = layui.jquery;
var percent = n + '%' //获取进度百分比
//进行动态绑
layui.element.init();
//$('#demo1').attr('lay-percent',percent);
element.progress('demo1', percent);
});
}
效果如下:
此时,已经能够正常进行动态渲染,但似乎发现其动态数字进度显示好像很乱,那是因为执行了这行代码,
layui.element.init();
这行代码就是度element进行初始化,我自定义的进度条如下;
<div class="layui-progress layui-progress-big"lay-showpercent="true"lay-filter="demo1">
<div class="layui-progress-bar layui-bg-red" lay-percent="100%"></div>
</div>
发现每次初始化后,值为100,所以进度显示的数字就会每次都变回100,但如果把这行代码加到下面这个位置,进度的数字会显示不出来,代码如下:
layui.use('element', function(){
var element = layui.element;
var $ = layui.jquery;
//此时加在这里,对进度条进行初始化,会发现进度条不显示数字
layui.element.init();
layui.use('upload', function(){
...
,progress: function(n, elem){
var percent = n + '%'
element.progress('demo1', percent);
}
我们可以加个次数控制器,在初次执行进度回调函数的时候,对进度条进行初始化,之后可以跳过此初始化代码,代码如下:
layui.use('element', function(){
var element = layui.element;
var $ = layui.jquery;
layui.use('upload', function(){
var upload = layui.upload;
var thisProgress;
var fileName_up;
//控制器,可以对回调的次数进行控制
var come = 0;
//执行实例
var uploadInst = upload.render({
elem: '#uploadFile' //绑定元素
,url: 'http://*************.51vip.biz/data/upLoadFile' //上传接口
,accept: 'file' //允许上传的文件类型
,size: 716800 //最大允许上传的文件大小
,auto:false
,bindAction:'#sureUpload'
// ,multiple:'true'
,drag:true
,data:{
}
,done: function(res){
//上传完毕回调
layer.msg(fileName_up+"上传成功!");
}
,error: function(){
//请求异常回调
// layer.msg("上传异常,请检查网络或者查看服务器是否正常.");
}
,progress: function(n, elem){
//第一次执行进度回调函数的时候,对进度条进行初始化
if(come == 0){
layui.element.init();
come ++;
}
//之后直接执行下面代码,
var percent = n + '%' //获取进度百分比
// $('#demo1').attr('lay-percent',percent);
element.progress('demo1', percent);
// });
}
});
});
});
效果:
可以看到,效果已经调整好