转载地址:https://blog.csdn.net/lin452473623/article/details/80785180
测试说,请改成真实进度条,于是我#?¥@#,碎碎念一个小时之后还是只能怂怂的改。参考了https://www.cnblogs.com/youmingkuang/p/9183528.html,说得非常详细,一改就通,做个记录,以下是代码:
<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();">
<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;
upload.render({
elem: '#test8'
,url: 'upload'
,async: false
,method: 'post'
,data: {
upgradeType: function(){
return $("input[name='upgradeType']:checked").val();
}
}
,auto: false
,xhr:xhrOnProgress
,progress:function(value){//上传进度回调 value进度值
element.progress('demo', value+'%')//设置页面进度条
}
,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){
layer.load(); //上传loading
}
,done: function(res){
layer.msg("上传成功");
}
,error: function(index, upload){
element.progress('demo', '0%');
layer.msg('上传失败');
}
});
});
以下代码也需要放到上面js所在文件中
//创建监听函数
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
然后,还需要改动layui文件夹下modules文件夹中upload.js中代码,按照参考文档中写法会报options is undefined错误,查看upload.js代码中上下文后稍做修改后可以实现,以下是修改过后代码,若运行报l is undefined错误,可以搜索源文件ajax,查看"url:"后用的是什么参数,将添加的代码中也修改为相同参数即可,找到该文件中ajax部分,添加下列代码中标注了是新功能部分:
$.ajax({
url: l.url
,type: l.method
,data: formData
,contentType: false
,processData: false
,dataType: 'json'
,xhr:l.xhr(function(e){//此处为新添加功能
var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
l.progress(percent);//回调将数值返回
})
,success: function(res){
successful++;
done(index, res);
allDone();
}
,error: function(e){
console.log(e)
aborted++;
that.msg('请求上传接口出现异常');
error(index);
allDone();
}
});
然后运行起来,就是一个完美的实时进度条啦~
---------------------
作者:lin452473623
来源:CSDN
原文:https://blog.csdn.net/lin452473623/article/details/80785180