一直在用ajax，但是没有做进度条，原来$.ajax里面封装了xhr,只要从这里面取得上传进度。
这是将回调写到变数里
将xhr对像放到 $.ajax({....,xhr});
$.ajax({
url:'xxxx',
....,
//获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
xhr: function(){
myXhr = $.ajaxSettings.xhr();
//获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
if(myXhr.upload){
//绑定progress事件的回调函数
myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
}
//xhr对象返回给jQuery使用
return myXhr;
},
success:function(){}
});
绑定到'progress' 这里要自己再定义progressHandlingFunction
//上传进度回调函数：
function progressHandlingFunction(e) {
if (e.lengthComputable) {
//e.loaded 上传大小
//e.total 文件大小
var percent = e.loaded/e.total;
}
}
这是将回调写到ajax过程中
先定一个方法
var jqureAjaxXhrOnProgress = function(fun) {
jqureAjaxXhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof jqureAjaxXhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (jqureAjaxXhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = jqureAjaxXhrOnProgress.onprogress;
}
return xhr;
}
}
再到$.ajax({...,})
$.ajax({
url:'xxxx',
....,
xhr:jqureAjaxXhrOnProgress(function(e){
var percent=e.loaded / e.total;
$('#ajaxfilestext').html(percent);
}),
success:function(){}
});
再根据自己的需求写进度条。
