Overall progress bar while upload some files through AJAX with HTML5

Question

I have one progress bar which increases depending by number of files and their size.

I want to display overall progress bar while upload files on server using AJAX and HTML5.

I upload every file to server and increase progress bar. But I don't know how.

So, the javascript code:

$("#add-files").on("change", function(){
   var files = $(this).prop("files");

   $.each(files, function(index, file) {
      var formData = new FormData();
      formData.append("FileName", file.name);
      formData.append("FileSize", file.size);

      uploadOnServer(formData);
   });
});

function uploadOnServer(formData) {
   var xmlHttpRequest = new XMLHttpRequest();
   if (xmlHttpRequest.upload) {
         xmlHttpRequest.upload.addEventListener("progress", function(evt) {
            if(evt.lengthComputable) {
                 var percent = 100 * (evt.loaded / evt.total);

                // update progress bar
            }
         });
    }

   $.ajax({
       url: "test/test",
       type: "POST",
       data: formData,
       processData: false,
       xhr: function() { return xmlHttpRequest; },
       success: function(result) { ... }
    });
}

Do you want to display how many percentage of File gets uploaded ? — Satinder singh
– Satinder singh, Commented May 26, 2015 at 7:52
I think he wants to show one overall upload progress bar, instead of progress bar for individual files. — Rainer Plumer
– Rainer Plumer, Commented May 26, 2015 at 8:20
@RainerPlumer: Yes, I want overall progress bar instead of each for separate file... — Snake Eyes
– Snake Eyes, Commented May 26, 2015 at 8:21
In that case, my answer should work..i haven't tried it though. — Rainer Plumer
– Rainer Plumer, Commented May 26, 2015 at 9:18

Martijn Pieters · Accepted Answer · 2021-05-07 00:39:20Z

3

If am not wrong you want to display percentage of each file gets uploaded, then look at this

   <div id="#statustxt_n">0%</div>

function uploadFile(file) {
     var formData = new FormData();
     formData.append('file', $('#add-files')[0].files[0]);
    
      $.ajax({
            type: 'post',
            url: 'test/test',
            xhr: function() {  // Custom XMLHttpRequest
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // Check if upload property exists
                     //update progressbar percent complete
                     statustxt1.html('0%');
             // For handling the progress of the upload
             myXhr.upload.addEventListener('progress',progressHandlingFunction, false);

                   }
                   return myXhr;
                },
            data: formData,
             success: function (status) {
                 alert("Success")
                 },
            processData: false,
            contentType: false
        });
    }


function progressHandlingFunction(e)
{
    if(e.lengthComputable){
        var percentage = Math.floor((e.loaded / e.total) * 100);
        //update progressbar percent complete
        statustxt1.html(percentage + '%');
        console.log("Value = "+e.loaded +" :: Max ="+e.total);
    }
}

edited May 7, 2021 at 0:39

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered May 26, 2015 at 7:55

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

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

1 Comment

Snake Eyes Over a year ago

I don't want for individual file. I want to play the overall progress bar !

Rainer Plumer · Accepted Answer · 2015-05-26 08:16:20Z

I havent done this kind of progress bar before, so below is just a pseudo code/an idea what you could try.

first, define a global array, that contains all the xmlHttpRequest objects.

var loadingXhrRequests = [];//<--push all xhr requests here

then. whenever you start a new upload, create your xhr request and push it into the array.

//go over all xhrRequests, and add the total loaded and total to load 
var globalUpdateProgress() {
    var i, xhr, loaded = 0, total = 0, xhr;
    for (i = 0; i < loadingXhrRequests.length; i++) {
        xhr = loadingXhrRequests[i];
        if (xhr.total && xhr.loaded) {total+=xhr.total;loaded += xhr.loaded;}
    }
    return (100 * (loaded / total));
}
var xhr = new XMLHttpRequest();
loadingXhrRequests.push(xhr);

var xhr2 = new XMLHttpRequest();
loadingXhrRequests.push(xhr2);

//start uploading using xhr and xhr2 ... or more.

then, whenever you get a progress update from any of the xhr objects, you call a shared updateProgress function that goes through the array, and checks the progress of all the xhr objects. Also store last event loaded/total values in xhr for access later.

xhr.upload.addEventListener("progress", function(evt) {
    if(evt.lengthComputable) {
        var percent = 100 * (evt.loaded / evt.total);
        xhr.loaded = evt.loaded;
        xhr.total = evt.total;
        //note - check that you dont overwrite any important properties of xhr
        // update progress bar 
        globalUpdateProgress();//<- call this in all individual xhr progress callback
    }
});

Collectives™ on Stack Overflow

Overall progress bar while upload some files through AJAX with HTML5

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related