HTML5 téléchargement du fichier avec plusieurs barres de progression

Je suis le téléchargement de plusieurs fichiers via XmlHTTPRequest et HTML5. J'ai le téléchargement fonctionne très bien, mais je voudrais avoir une barre de progression pour chaque upload de fichier en cours. Le code que j'ai, cependant, utilise la dernière barre de progression pour TOUS les uploads de fichier au lieu de tous les charger à l'aide de sa propre barre de progression. Donc, c'est surtout visuelle sur le côté client, mais c'est vraiment ennuyeux moi. Pour une raison que je suis en supposant que l'événement qui s'attache à la progression de l'upload de fichier écrase lui-même et utilise la dernière barre de progression. Voici mon code:

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);
        }

Je suis en supposant que le "li" n'est pas en train de lire correctement par les "progrès" de l'événement. Je soupçonne qu'il ya une sorte de liaison-je faire pour dire les "progrès" de l'événement à utiliser une variable particulière car il est "li", mais je ne suis pas sûr de ce que je suis absent.

OriginalL'auteur Dan L | 2011-07-18

  1. 16

    Votre exemple ne fonctionne pas correctement becourse vous ne prenez pas en compte le fait que xhr progrès événement est déclenché lorsque tous les éléments de la liste avait déjà été créé. Cependant, il ya beaucoup de façons de rendre votre exemple de travail. L'idée est de laisser xhr savoir ce qu'est exactement un élément de liste il a à gérer. Par exemple, utiliser ce code (je n'ai pas vérifier si cela fonctionne. Le but de ce code est de décrire l'idée):

    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);

    OriginalL'auteur Molecular Man