add XHR2 progress events to jQuery.ajax

jquery.ajax.progress.js

(function addXhrProgressEvent($) {
    var originalXhr = $.ajaxSettings.xhr;
    $.ajaxSetup({
        progress: function() { console.log("standard progress callback"); },
        xhr: function() {
            var req = originalXhr(), that = this;
            if (req) {
                if (typeof req.addEventListener == "function") {
                    req.addEventListener("progress", function(evt) {
                        that.progress(evt);
                    },false);
                }
            }
            return req;
        }
    });
})(jQuery);


// usage:
// note, if testing locally, size of file needs to be large enough
// to allow time for events to fire

$.ajax({
    url: "./json.js",
    type: "GET",
    dataType: "json",
    complete: function() { console.log("Completed."); },
    progress: function(evt) {
        if (evt.lengthComputable) {
            console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");
        }
        else {
            console.log("Length not computable.");
        }
    }

});

You could also use xhrFields

$.ajax({
  url: '/foobar',
  xhrFields: {
    onprogress: function(e) {
        if (evt.lengthComputable) {
            console.log("Loaded " + Number( (e.loaded / e.total * 100)) + "%");
        }
        else {
            console.log("Length not computable.");
        }
    }
  }
});

+@shinuza

evt should be e (and there's no need for Number here):

$.ajax({
    url: '/foobar',
    xhrFields: {
        onprogress: function (e) {
            if (e.lengthComputable) {
                console.log('Loaded '+ (e.loaded / e.total * 100) + '%');
            } else {
                console.log('Length not computable.');
            }
        }
    }
});

For progress events specific to uploading, maybe following change is needed on line #7, #8 and #9

(function addXhrProgressEvent($) {
    var originalXhr = $.ajaxSettings.xhr;
    $.ajaxSetup({
        progress: function() { console.log("standard progress callback"); },
        progressUpload: function() { console.log("standard upload progress callback"); },
        xhr: function() {
            var req = originalXhr(), that = this;
            if (req.upload) {
                if (typeof req.upload.addEventListener == "function") {
                    req.upload.addEventListener("progress", function(evt) {
                        that.progressUpload(evt);
                    },false);
                }
            }
            return req;
        }
    });
})(jQuery);

I want to do this for progress bar.How can I do this.Cna you write codes?

how can I preload percentage html page with ajax and jquery?

hi,i test your code ,but i find that the code "console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");" just only log one time,it just print out "100%" only.how can i do?

@susamcsx your file is to small!

Agree with susamcsx.
It works very fyn in mozzila, but in chrome, it instantly reaches to 100% no matter what file size is
if file is very large, even at that time it reached to 100 instantly.
Please help me to get out this situation, i am almost stuck now with problem from last 3 hours

added support for the global ajax events

(function addXhrProgressEvent($) {
    var originalXhr = $.ajaxSettings.xhr;

    $.ajaxSetup({
        progress: $.noop,
        xhr: function() {
            var xhr = originalXhr(), that = this;
            if (xhr) {
                if (typeof xhr.addEventListener == "function") {
                    xhr.addEventListener("progress", function(event) {
                        that.progress(event);

                        if (that.global) {
                            var event = $.Event('ajaxProgress', event);
                            event.type = 'ajaxProgress';
                            $(document).trigger(event, [xhr]);
                        }
                    },false);
                }
            }
            return xhr;
        }
    });
})(jQuery);

the problem is that it can be more than one request at a time, so the only one possibility is try to use xhr.responseURL to indentify the requests

Hi,
Really useful patch. Thanks!

But how can I detect if this patch has already been applied in another js script on a page?
eg: I might have two plugins which included this patch. The second time this is included, it seems to break it.

Cheers!

Muito Bom!

I made a plugin, that adds support of progress promise

Please how use it ?

Hi,

What does it mean? " Length not computable."
How will it work in jquery-3.1.1?

Thanks

Length not computable
http://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr/43519513#43519513

Not working for me on cpanel server :-(

I have tried with exactly what u have given. However, this worked in localhost !