html5 - bootstrap - colocar barra de progreso html

Carga de archivos HTML5 con barras de progreso múltiples

Question

Estoy cargando varios archivos a través de XmlHTTPRequest y HTML5. Tengo la carga funcionando bien, pero me gustaría tener una barra de progreso para cada carga de archivo. El código que tengo, sin embargo, usa la última barra de progreso para TODAS las cargas de archivos en lugar de cada carga usando su propia barra de progreso. Así que esto es principalmente visual en el lado del cliente, pero realmente me molesta. Por alguna razón, asumo que el evento que vincula el progreso de la carga del archivo se sobrescribe a sí mismo y utiliza la última barra de progreso. Aquí está mi código:

var files = event.dataTransfer.files;

    // iterate over each file to upload, send a request, and attach progress event
    for (var i = 0, file; file = files[i]; i++) {
        var li = $("<li>" + file.name + "<div class=''progressbar''></div></li>");

        // add the LI to the list of uploading files
        $("#uploads").append(li);

        // fade in the LI instead of just showing it
        li.hide().fadeIn();

        var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener(''progress'', function(e) {
                var percent = parseInt(e.loaded / e.total * 100);
                li.find(".progressbar").width(percent);
            }, false);

            // check when the upload is finished
            xhr.onreadystatechange = stateChange;

            // setup and send the file
            xhr.open(''POST'', ''/attachments'', true);
            xhr.setRequestHeader(''X-FILE-NAME'', file.name);
            xhr.send(file);
        }

Supongo que el "progreso" no lee correctamente la "li" correcta. Sospecho que tengo que hacer algún tipo de encuadernación para decir al evento de "progreso" que use una variable en particular, ya que es "li", pero no estoy seguro de lo que me estoy perdiendo.

Answer 1

Su ejemplo no funciona correctamente, por supuesto, no tiene en cuenta que el evento de progreso xhr se activa cuando todos los elementos de la lista ya se han creado. Sin embargo, hay muchas maneras de hacer que tu ejemplo funcione. La idea es dejar que xhr sepa exactamente qué elemento está tratando. Por ejemplo, use este código (no revisé si funciona. El propósito de este código es describir la idea):

var xhr = new XMLHttpRequest();
xhr.upload.li = li;
xhr.upload.addEventListener(''progress'', function(e) {
    var percent = parseInt(e.loaded / e.total * 100);
    this.li.find(".progressbar").width(percent);
}, false);

Answer 2

Creo que encontré una solución para este problema. Parece que está trabajando en algunas de mis pruebas. No soy muy bueno en inglés, así que solo compartiré mi script de muestra. Si haces alguna pregunta, intentaré explicar más :)

// This is input object which type of file.  
var uploader = document.getElementById("fileUploader"); 

// We''ll send a new post for each file.
for(var i=0, j=uploader.files.length; i<j; i++)
{
    var uploaderForm = new FormData(); // Create new FormData
    uploaderForm.append("action","upload"); // append extra parameters if you wish.
    uploaderForm.append("up_file",uploader.files[i]); // append the next file for upload

    var xhr = new XMLHttpRequest();

    xhr.addEventListener("loadstart", function(e){
        // generate unique id for progress bars. This is important because we''ll use it on progress event for modifications
        this.progressId = "progress_" + Math.floor((Math.random() * 100000)); 

        // append progress elements to somewhere you want
        $("body").append(''<div id="'' + this.progressId + ''" class="myCustomProgressBar" ></div>'');
    });
    xhr.addEventListener("progress", function(e){
        var total = e.total;
        var loaded = e.loaded;
        var percent = (100 / total) * loaded; // Calculate percentage of loaded data

        // I animate progress object. Notice that i use "this.progressId" which i created on loadstart event.
        $("#" + this.progressId).animate({"width":300 * (percent / 100)}, 800);
    });

    xhr.open("POST","index.php");
    xhr.send(uploaderForm);
}