代码:
/* 进度条 */
var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){}
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;
}
}
/* 上传文件 */
var formData = new FormData(document.getElementById("form22"));
$.ajax({
url: baseURL+'appInfo/addAppInfo',
type: 'post',
data: formData,
ansyc:false,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
xhr:xhrOnProgress(function(e){
var per=100 * e.loaded / e.total;//计算百分比
var son = document.getElementById('tiao');
son.innerHTML = per + "%";
son.style.width = per + "%";
}),
success: function(dd){
if(dd.code==0){
layer.msg('已添加');
tableins.reload();
layer.close(index);
}else{
layer.msg(dd.msg);
}
},
error: function (dd) {
layer.msg("异常");
layer.close(index);
}
});
html进度条
<!-- 进度条样式 -->
<style type="text/css">
#tbox{width:100%; height:20px; background-color:#FFEE99;
margin-top:20px;border-radius: 15px;}
#tiao{width:0px; height:20px; background-color:#f0981c;
text-align:center;border-radius: 15px;font-family:Tahoma; font-size:12px;
line-height:18px;}
</style>
<!-- 进度条 -->
<div id="tbox">
<div id="tiao"></div>
</div>