jquery xhr upload属性包装
用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