用html5新的 XMLHttpRequest 和 File API,同时又用jquery。
新的xhr上,有个upload属性,可以在上面绑定progress监听。
而jquery包装后的xhr(这里指常规如complete,beforeSend回调中返回的xhr),是没有upload属性的
所以~~要利用jquery的api再包装下,两种方式:全局级别 or 请求级别
//全局级别
//重写(确切的说是扩展)xhr生成方法,
var oldXHR = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function() {
var xhr = oldXHR();
if(xhr instanceof window.XMLHttpRequest) {
xhr.upload.addEventListener('progress', on_progress, false);
xhr.upload.addEventListener('load', on_loaded, false);
xhr.addEventListener('abort', on_abort, false);
}
return xhr;
};
//请求级别
//利用$.ajax的参数xhr
$.ajax({
xhr: function() {
var xhr = jQuery.ajaxSettings.xhr();
if(xhr instanceof window.XMLHttpRequest) {
xhr.upload.addEventListener('progress', on_progress, false);
xhr.upload.addEventListener('load', on_loaded, false);
xhr.addEventListener('abort', on_abort, false);
}
return xhr;
}
});
这里只对$.ajax中的xhr对象做了upload属性的包装,其实可以利用$.ajaxSetup,完成对全局$.ajax默认参数的设定
比如$.ajaxSetup({"type" : 'POST'}),默认的ajax就都是post啦~
不得不说,jquery的api,太人性化了~~
参考:http://stackoverflow.com/questions/4915671/how-to-get-pure-xmlhttprequest-object-in-jquery-1-5?lq=1