javascript - Managing Progress Bars for Multiple File Upload - Stack Overflow

admin管理员组

文章数量:1025496

So I am using a ajax to upload multiple files. Everything seems to be working like a charm... I just can't get to make my progress bars to work ...

Any help would be really appreciated. Thanks.

var images = document.getElementById('images');
for(var i=0;i<images.files.length;i++) {
    var formData = new FormData();
    var image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+i+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

I am basically uploading images individually .. I figured that would help me track the progress bars better ... Perhaps there's another approach.

So I am using a ajax to upload multiple files. Everything seems to be working like a charm... I just can't get to make my progress bars to work ...

Any help would be really appreciated. Thanks.

var images = document.getElementById('images');
for(var i=0;i<images.files.length;i++) {
    var formData = new FormData();
    var image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+i+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

I am basically uploading images individually .. I figured that would help me track the progress bars better ... Perhaps there's another approach.

• javascript
• html
• progress

Share Improve this question Follow edited Aug 4, 2014 at 13:18 Ilya Luzyanin 8,11044 gold badges3131 silver badges4949 bronze badges asked Aug 4, 2014 at 13:13 sarovarcsarovarc 40711 gold badge66 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

According to [MDN][1]:

Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.

So, bining this knowledge with Engin's answer, you could do like this:

const images = document.getElementById('images');
const pletedCount = 0; // added for loadend scenario
const length = images.files.length;

for (let i = 0; i < length; i++) {
    const formData = new FormData();
    const image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    const xmlhttp = new XMLHttpRequest();
    (elId => {
        xmlhttp.upload.addEventListener('progress', e => {
            document.getElementById('image_' + elId + '_progress').value = Math.ceil(e.loaded / e.total) * 100;
        }, false);
    })(i); // to unbind i.

    // --- added for loadend scenario. ---
    xmlhttp.addEventListener('loadend', () => {
        pletedCount++;
        if (pletedCount == length) {
            // here you should hide your gif animation
        }
    }, false);
    // ---
    xmlhttp.open('POST', '/pictures/uploadImage');
    xmlhttp.send(formData);
}

UPDATE:

To catch the event when all files are uploaded you may use loadend events. I've updated my code (see ments), I'm not sure this is a correct way though. [1]: https://developer.mozilla/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

i did not try but i think it works, because for loop finished before your post and "i"s value equal to images.files.length. sorry for terrible english

try this:

var images = document.getElementById('images');

for(var i=0;i<images.files.length;i++) {
    getProgress(images.files[i],i); 
}

function getProgress(image,order){
    var formData = new FormData();
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+order+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

You can include another function.

function upload(ProgressbarId){

    /*
     .
     .
     .
     some code
    */

    xmlhttp.upload.addEventListener("progress", function(evt){uploadProgress(evt,ProgressbarId);}, false);

}


function uploadProgress(evt,ProgressbarId) {

    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        set_Progressbar(ProgressbarId,percentComplete);
    }
}

}

So I am using a ajax to upload multiple files. Everything seems to be working like a charm... I just can't get to make my progress bars to work ...

Any help would be really appreciated. Thanks.

var images = document.getElementById('images');
for(var i=0;i<images.files.length;i++) {
    var formData = new FormData();
    var image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+i+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

I am basically uploading images individually .. I figured that would help me track the progress bars better ... Perhaps there's another approach.

So I am using a ajax to upload multiple files. Everything seems to be working like a charm... I just can't get to make my progress bars to work ...

Any help would be really appreciated. Thanks.

var images = document.getElementById('images');
for(var i=0;i<images.files.length;i++) {
    var formData = new FormData();
    var image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+i+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

I am basically uploading images individually .. I figured that would help me track the progress bars better ... Perhaps there's another approach.

• javascript
• html
• progress

Share Improve this question Follow edited Aug 4, 2014 at 13:18 Ilya Luzyanin 8,11044 gold badges3131 silver badges4949 bronze badges asked Aug 4, 2014 at 13:13 sarovarcsarovarc 40711 gold badge66 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

According to [MDN][1]:

Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.

So, bining this knowledge with Engin's answer, you could do like this:

const images = document.getElementById('images');
const pletedCount = 0; // added for loadend scenario
const length = images.files.length;

for (let i = 0; i < length; i++) {
    const formData = new FormData();
    const image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    const xmlhttp = new XMLHttpRequest();
    (elId => {
        xmlhttp.upload.addEventListener('progress', e => {
            document.getElementById('image_' + elId + '_progress').value = Math.ceil(e.loaded / e.total) * 100;
        }, false);
    })(i); // to unbind i.

    // --- added for loadend scenario. ---
    xmlhttp.addEventListener('loadend', () => {
        pletedCount++;
        if (pletedCount == length) {
            // here you should hide your gif animation
        }
    }, false);
    // ---
    xmlhttp.open('POST', '/pictures/uploadImage');
    xmlhttp.send(formData);
}

UPDATE:

To catch the event when all files are uploaded you may use loadend events. I've updated my code (see ments), I'm not sure this is a correct way though. [1]: https://developer.mozilla/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

i did not try but i think it works, because for loop finished before your post and "i"s value equal to images.files.length. sorry for terrible english

try this:

var images = document.getElementById('images');

for(var i=0;i<images.files.length;i++) {
    getProgress(images.files[i],i); 
}

function getProgress(image,order){
    var formData = new FormData();
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+order+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

You can include another function.

function upload(ProgressbarId){

    /*
     .
     .
     .
     some code
    */

    xmlhttp.upload.addEventListener("progress", function(evt){uploadProgress(evt,ProgressbarId);}, false);

}


function uploadProgress(evt,ProgressbarId) {

    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        set_Progressbar(ProgressbarId,percentComplete);
    }
}

}

本文标签： javascriptManaging Progress Bars for Multiple File UploadStack Overflow