> Uncategorized > #Jquery # progress 

#Jquery #Ajax progress indicator

68747470733a2f2f7261772e6769746875622e636f6d2f4b656e616469612f63697263756c61722d70726f67726573732d696e64696361746f722f6d61737465722f73637265656e73686f742e706e67  - 68747470733a2f2f7261772e6769746875622e636f6d2f4b656e616469612f63697263756c61722d70726f67726573732d696e64696361746f722f6d61737465722f73637265656e73686f742e706e67 - #Jquery #Ajax progress indicator | Network Programming in .NET

If you are using JQuery Ajax to upload a file, or other large blob of data, you might want to show the user that something is happening, rather than just showing an animated gif.

Here’s a JQuery Plugin by Chad Engler which can extend the default $.ajax behavior to progress updates as a percentage.

(function ($, window, undefined) {
//is onprogress supported by browser?
var hasOnProgress = (“onprogress” in $.ajaxSettings.xhr());

//If not supported, do nothing
if (!hasOnProgress) {

//patch ajax settings to call a progress callback
var oldXHR = $.ajaxSettings.xhr;
$.ajaxSettings.xhr = function () {
var xhr = oldXHR.apply(this, arguments);
if (xhr instanceof window.XMLHttpRequest) {
xhr.addEventListener(‘progress’, this.progress, false);

if (xhr.upload) {
xhr.upload.addEventListener(‘progress’, this.progress, false);

return xhr;
})(jQuery, window);

To use it, you would write code allong the lines of:

Upload: function(data,  callback, progressCallback)
var strUrl = “/Upload.aspx”;
method: ‘POST’,
url: strUrl,
dataType: ‘json’,
data: {
Data: data
success: function (result)
error: function () { },
progress: function (e) {
if (e.lengthComputable) {
progressCallback(Math.round(e.loaded / * 0));

I’ve just used this on the upload feature of

Source link


Please enter your comment!
Please enter your name here