Jquery Ajax Progress via Xhr

JQuery ajax progress via xhr

ProgressEvent.lengthComputable

The ProgressEvent.lengthComputable read-only property is a Boolean
flag indicating if the resource concerned by the ProgressEvent has a
length that can be calculated. If not, the ProgressEvent.total
property has no significant value.

So in your case if you debug a little , you will find evt.lengthComputable = false; so you can not trace the progress;

    xhr.addEventListener("progress", function (evt) {
        console.log(evt.lengthComputable); // false
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            progressElem.html(Math.round(percentComplete * 100) + "%");
        }
    }, false);

DEMO

---

FYI

If lengthComputable is false within the XMLHttpRequestProgressEvent, that means the server never sent a Content-Length header in the response.

Can onprogress functionality be added to jQuery.ajax() by using xhrFields?

Short answer:
No, you can't do what you want using xhrFields.

Long answer:

There are two progress events in a XmlHttpRequest object:

• The response progress (XmlHttpRequest.onprogress)
  
  This is when the browser is downloading the data from the server.

• The request progress (XmlHttpRequest.upload.onprogress)
  
  This is when the browser is sending the data to the server (including POST parameters, cookies, and files)

In your code you are using the response progress event, but what you need is the request progress event. This is how you do it:

$.ajax({
    async: true,
    contentType: file.type,
    data: file,
    dataType: 'xml',
    processData: false,
    success: function(xml){
        // Do stuff with the returned xml
    },
    type: 'post',
    url: '/fileuploader/' + file.name,
    xhr: function(){
        // get the native XmlHttpRequest object
        var xhr = $.ajaxSettings.xhr() ;
        // set the onprogress event handler
        xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ;
        // set the onload event handler
        xhr.upload.onload = function(){ console.log('DONE!') } ;
        // return the customized object
        return xhr ;
    }
});

The xhr option parameter must be a function that returns a native XmlHttpRequest object for jQuery to use.

update progress bar using ajax request seconds

I think this post is quite clear
http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

Posting this for future reference (should the blog be removed):

$.ajax({
     xhr: function(){
       var xhr = new window.XMLHttpRequest();
       //Upload progress
       xhr.upload.addEventListener("progress", function(evt){
       if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with upload progress
         console.log(percentComplete);
         }
       }, false);
     //Download progress
       xhr.addEventListener("progress", function(evt){
         if (evt.lengthComputable) {
           var percentComplete = evt.loaded / evt.total;
         //Do something with download progress
           console.log(percentComplete);
         }
       }, false);
       return xhr;
     },
     type: 'POST',
     url: "/",
     data: {},
     success: function(data){
    //Do something success-ish
    }
 });

jquery ajax progress with custom calculation

Waw I found a solution!

I am happy to discover that new thing I did not know about PHP and share with people who also don't know (in step 3 bellow)!

@riccardo was right talking about socket - which I don't know so well - but I did not need to go that far.

So I had multiple things to solve in my case before being able to get closer of my goal.

1. not using xhr.addEventListener("progress"... but a second ajax call in a timer: it will also be lighter-weight in resource consumption.

2. rather than using a timer like setInterval or setTimeout - as requests are async it may come in unwanted order - use a recursive call in callback of first call like:

   function trackProgress()
   {
       $.getJSON('create-a-new-page.html', 'ajaxTrackProgress=1', function(response)
       {
           var progress = response.progress;
           $('#progress').text(progress);
   
           if (progress < 100) trackProgress();
       });
   }
   

3. then realize that my second script call is delayed by first script still running? yes. So the key here is session_write_close()!
   I could dig in this way thanks to this good post:
   https://stackoverflow.com/a/1430921/2012407

and I posted a very simple example here to reply to another question: https://stackoverflow.com/a/38334673/2012407

Thank you for all your help in comments guys, it led me to this solution. ;)

---

Related Topics