jquery multiple ajax file upload loop async with multiple progressbar

Question

I need to upload multiple files but one each time asynchronous and show progress for each file. For each file i use separate progress bar with class name according to the list index (ie uploadprogress0,uploadprogress1) my code is this:

   var i=0
   var formData = new FormData();               
   formData.append('files[]', toUpload[i]);
   ajaxloopreq(formData);
   var ajaxloopreq = function (formData) {
         $.ajax({
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = e.loaded / e.total;
                        elem.find('.uploadprogress' + i).css({
                            width: percentComplete * 100 + '%'
                        });
                    }
                }, false);
                return xhr;
            },
            async: true,
            type: 'POST',
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            url: '',
            success:function(data){
                //do something
               }
        })
        i++;
        if (i <toUpload.length) {
            var formData = new FormData();               
            formData.append('files[]', toUpload[i]);
            ajaxloopreq(formData);
        } 
}

the result of that is the progress goes only in the last uploadprogress div as a result the progress goes like crazy (parallels progress). Any idea how to fix it?

Bas Slagter · Accepted Answer · 2015-11-13 15:23:28Z

1

This is because your upload progress is asynchronous and you variable 'i' is incremented synchronous. So by the time your first file is uploaded the value of 'i' is already equal to the length of the total amount of files.

You can probably fix it by passing along the index with the call to ajaxloopreq:

ajaxloopreq(formata, i);

And use that to find the correct div.

answered Nov 13, 2015 at 15:23

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

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

2 Comments

Mike Antoniadis Over a year ago

Thank you!! That fix my problem!

Bas Slagter Over a year ago

No problem. Hope my answer also gave insight it what was the actual problem you where having?

Collectives™ on Stack Overflow

jquery multiple ajax file upload loop async with multiple progressbar

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related