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

ajax get progress from server
jquery ajax loading percentage
jquery progress bar ajax response
ajax upload progress
jquery ajax xhr
xhr onprogress
jquery ajax complete
ajax file upload with progress bar

As suggested here: https://gist.github.com/HenrikJoreteg/2502497, I'm trying to add onprogress functionality to my jQuery.ajax() file upload. The upload works fine, and the onprogress event is firing, but not as I expected--instead of firing repeatedly at some time interval, it's firing only once, when the upload has completed. Is there a way to specify the frequency of onprogress refreshes? Or, am I trying to do something that can't be done? Here's my code:

$.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,
    xhrFields:
    {
        onprogress: function(progress)
        {
            var percentage = Math.floor((progress.total / progress.totalSize) * 100);
            console.log('progress', percentage);
            if (percentage === 100)
            {
                console.log('DONE!');
            }
        }
    }
});

add XHR2 progress events to jQuery.ajax · GitHub, You could also use xhrFields. $.ajax({ url: '/foobar', xhrFields: { onprogress: function(e) { if (evt.lengthComputable) { console.log("Loaded " + Number( (e.​loaded  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)

You need to add an event handler to the request itself before it is sent out. jQuery.ajax allows this through the 'beforeSend' property http://api.jquery.com/jQuery.ajax/

for example: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

* EDIT * Make sure to look at the second code sample of that example link. I believe the first one is out of date with modern versions of jQuery.

$.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
  }
});

Get progress of an AJAX request (Example), A protip by lukemadhanga about jquery, php, progress, download, xhr, you're scared that people with über slow connections will get impatient and ajaxSettings.xhr(); xhr.onprogress = function e() { // For downloads if (e. Even in the comments of that blog, people suggested using the onprogress attribute in the xhrFields option but again this SO Post confirms that it's not possible in the newer versions of Jquery as it has been deprecated. In that post only, the answer suggests :

This is a bit of a hack of another answer elsewhere on Stack Overflow, but I think answers your question. I have doctored it to my own needs of pumping "streamed" data from the server to a scrollable div (which I can then force to always scroll to the bottom thus showing progress over time and thus not waiting for the entire record set to complete).

The client side code below adds the resulting content to a predefined div with id "scrollable_area" (which can then be scrolled)...

<div style="position:absolute; left:5px; right:5px; top:5px; height:35px;">
    <label for="auto_scroll">Auto Scroll</label> <input type="checkbox" id="auto_scroll" checked>
</div>
<div id="scrollable_area" style="position:absolute; overflow:auto; left:5px; right:5px; top:45px; bottom:5px;"></div>
<script type="text/javascript">
    var last_response_len = false;
    var auto_scroll = null;
    var scrollable_area = null;
    $().ready(function() {
        auto_scroll = document.getElementById("auto_scroll");
        scrollable_area = document.getElementById("scrollable_area");
        $.ajax("your_api_call.php", {
            xhrFields: {
                onprogress: function(e) {
                    var this_response, response = e.currentTarget.response;
                    if(last_response_len === false) {
                        this_response = response;
                        last_response_len = response.length;
                    } else {
                        this_response = response.substring(last_response_len);
                        last_response_len = response.length;
                    }
                    scrollable_area.innerHTML += this_response;
                    if(auto_scroll.checked) {
                        scrollable_area.scrollTop = scrollable_area.clientHeight + scrollable_area.scrollHeight + 500;
                    }
                }
            }
        })
        .done(function(data) {
            console.log("Completed response");
        })
        .fail(function(data) {
            console.log("Error: ", data);
        });
        console.log("your_api_call.php Request Sent!");
    });
</script>

The server side "your_api_call.php" file call would need to then flush its output (per data row so as to see progress over time) which can then be displayed immediately within the above "scrollable_area" div...

// Do Db loop
        while ($record = $recordset->fetch(PDO::FETCH_ASSOC)) {
            set_time_limit(10); // Don't timeout on large data sets seeing as this is a big task that we are wanting to watch progress!
            echo 'Do what you gotta do... ' . $record["register_id"] . '<br>';
            flush(); // Push to the client / ajax
            ob_flush(); // As above
        }

Short answer... YES. Hope this helps :-)

Can onprogress functionality be added to jQuery.ajax() by using , Can onprogress functionality be added to jQuery.ajax() by using url: '/​fileuploader/' + file.name, xhrFields: { onprogress: function(progress)  Can onprogress functionality be added to jQuery.ajax() by using xhrFields? Tags ajax android angular api button c++ class database date dynamic exception file function html http image input java javascript jquery json laravel list mysql object oop ph php phplaravel phpmysql phpphp post python sed select spring sql string text time url view

How to get the progress of an upload or download with jQuery AJAX , The onprogress event will trigger the updateProgress function of the request (​both download and upload events). But if we use jQuery we need  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.

JQuery ajax progress, This is very easy to implement if your familiar with JQuery, example code below. //Do something with download progress } }, false); }, success: function(data){ //​Do something success-ish } }); $.ajax({ xhr: function() { var xhr = new window. add XHR2 progress events to jQuery.ajax. GitHub Gist: instantly share code, notes, and snippets.

onprogress Event, object.onprogress = function(){myScript};. Try it Yourself ». In JavaScript, using the addEventListener() method: object.addEventListener("progress", myScript);. JQuery ajax progress - HTML5. Update: See end of post for jQuery versions after 1.5.1. This is just another reason to love HTML5 and never let it leave your life ♥ The second version of XMLHttpRequest (XMLHttpRequest2) supports progress events… for upload and download!!!!

Comments
  • I am trying to use same javascript file as you did? In server side , I am using PHP. Can u give some server side code example, how to resolve the file? it will help me a lot. $_POST['file'] not working for me.
  • If it's not possible using xhrFields, what is this object that is passed to onprogress in Chrome (v34.0)?
  • @c24w, I don't understand what you mean. The issue here is that using xhrFields you can configure the response progress but not the request progress. For the latter you have to do it in a different way.
  • I think I've misunderstood, so thanks for clarifying. So xhr.addEventListener('progress', cb) (in the xhr factory function) is equivalent to xhr.xhrFields.onprogress(cb)?
  • Both event handlers (the request progress and the response progress) can be set in two different ways. Either XHR.onprogress = handler_function or XHR.addEventListener('progress',handler_function). The same thing with the other one. It's either XHR.upload.onprogress = handler_function or XHR.upload.addEventListener('progress',handler_function)