jQuery 1.5+のjqXHRでファイルアップロードの進捗状況をリスニング(xhr.upload)

2320 ワード

XMLHttpRequest.upload
Firefox,Google Chrome and Safariでは、XMLhttpRequestでファイルをアップロードすると、XMLhttpRequestをリスニングすることができます.uploadオブジェクトのprogressイベントで進捗状況を表示します.
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
    // display uploading progress infomation...
});

 
xhr.uploadはjQueryで消えたの?
JQueryベストプラクティスを見終わった後、使用中の1.4.2を最新バージョンのjQuery 1.6.2で置き換えることにしましたが、やはり、性能は感覚的に向上しました.しかし悲劇の発見は、どのようにファイルをアップロードする進度がなくなったのか.デバッグでxhrが見つかりました.uploadがなくなりました.
jQueryのjqXHRドキュメントを参照すると、jqXHRはXMLhttpRequestの単純な拡張子ではないことがわかります.
 
どのようにして元のXMLHttpRequestを手に入れることができますか?
$でさえあれば.ajaxリクエストで元のXMLhttpRequestを取得し、uploadオブジェクトのprogressイベントをリスニングすれば、この問題を解決できます.そこで、元のXMLHttpRequestを手に入れるために、小さなコードを書く必要があります.
jQuery.ajaxドキュメントによると、xhrは自分で提供できます.
xhr: Function
    Default: ActiveXObject when available (IE), 
    the XMLHttpRequest otherwise Callback for creating 
    the XMLHttpRequest object. 
    Defaults to the ActiveXObject when available (IE), 
    the XMLHttpRequest otherwise. 
    Override to provide your own implementation for 
    XMLHttpRequest or enhancements to the factory.

 
これにより、xhrを自分で提供し、progressイベントを設定できます.
function onprogress(evt) {
    // display uploading progress infomation...
};
var xhr_provider = function() {
    var xhr = jQuery.ajaxSettings.xhr();
    if(onprogress && xhr.upload) {
        xhr.upload.addEventListener('progress', onprogress, false);
    }
    return xhr;
};

$.ajax({
    url: url,
    timeout: 5*60*1000,
    type : 'post',
    data: bb.getBlob(),
    contentType: 'multipart/form-data; boundary=' + boundary,
    processData: false,
    xhr: xhr_provider,
    success: function() {},
    error: function() {}
});