jQuery's "uploadProgress" not firing in "$.ajax"

Question

I am new to jQuery and now, I am currently working on file uploads. And I want to add some progress bar each time I upload image. I used the uploadProgress in jQuery but it seems doesn't work. Here's my code:

$('#_form_').on('submit', function(e){

   var file_and_desc = new FormData($(this)[0]),
       form_url = "_pages/_form_";

       var ext = choose.val(),
           allowed = ['jpg','png'];

       if(ext){
          var get_ext = ext.split('.');
              get_ext.reverse();

              if($.inArray(get_ext[0].toLowerCase(), allowed) > -1){
                   //upload image
                   $.ajax({
                         url : form_url,
                         type: 'POST',
                         data: file_and_desc,
                         contentType: false,
                         processData: false,
                         uploadProgress: function(event, positio, total, percentComplete){
                          $('h1').html(percentComplete);
                         },
                         success: function(data){
                              // some code here...
                         }
                   });
              }
       }
});

That's it! What should I do?

Possible duplicate of What is the cleanest way to get the progress of JQuery ajax request? — tklg
– tklg, Commented Feb 14, 2017 at 2:10

Community · Accepted Answer · 2017-05-23 12:01:40Z

24

According to the $.ajax() reference, uploadProgress is not a valid option.

Instead, the xhr option is used instead, which lets you set progress listeners on the XMLHttpRequest that is used by the ajax request.

this answer shows how to do that:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                //Do something with upload progress here
            }
       }, false);
       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Feb 15, 2017 at 20:52

tklg

2,6522 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

I think it is a valid reference if you have the jQuery form plugin installed. jquery.malsup.com/form

Vincent Over a year ago

I noticed that you created the xhr object using "window.XMLHttpRequest" rather than just simply "XMLHttpRequest". That was the missing piece of the puzzle for me.

Collectives™ on Stack Overflow

jQuery's "uploadProgress" not firing in "$.ajax"

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related