HTML5 Datei-Upload mit mehreren Balken

Ich bin das hochladen mehrerer Dateien per XmlHTTPRequest und HTML5. Ich habe das hochladen funktioniert Prima, aber ich würde gerne eine Fortschrittsanzeige für jede Datei hochladen geht. Den code habe ich, aber nutzt die letzten Fortschrittsbalken für ALLE Datei-uploads und nicht jeder laden mit seiner eigenen Fortschrittsbalken. So dies ist vor allem visuell auf der client-Seite, aber es ist wirklich ärgerlich mich. Für einige Grund ich ' m, vorausgesetzt, dass das Ereignis, misst den Fortschritt des Datei-upload überschreibt sich selbst und nutzt die letzten progress-bar. Hier ist mein 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);
        }

Gehe ich davon aus, dass die richtige "li" ist nicht immer richtig Lesen, indem Sie die "progress" - event. Ich vermute es gibt irgendeine Art von Bindung habe ich zu tun, zu sagen, die "progress" - Ereignis zu verwenden, eine bestimmte variable, wie es ist "li", aber ich bin mir nicht sicher, was mir fehlt.

InformationsquelleAutor Dan L | 2011-07-18
  1. 17

    Dein Beispiel funktioniert nicht richtig becourse Sie nicht berücksichtigen, dass xhr-progress-Ereignis wird ausgelöst, wenn alle Elemente der Liste bereits erstellt. Aber es gibt eine Menge von Möglichkeiten, um Ihr Beispiel funktioniert. Die Idee ist, lassen xhr wissen, was genau Listenelement er es zu tun hat. Zum Beispiel verwenden Sie diesen code (ich habe nicht überprüfen, ob es funktioniert. Der Zweck dieses code ist um die Idee zu beschreiben):

    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);
    InformationsquelleAutor Molecular Man
  2. 7

    Ich denke ich habe eine Lösung gefunden für dieses problem. Es sieht die Arbeit auf einige meiner tests. Ich bin nicht sehr gut in Englisch, also poste ich einfach mal mein Beispiel-Skript. Wenn Sie jede Frage stellen, ich werde versuchen, mehr zu erzählen 🙂

    //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);
}
    • Fantastisch, vielen Dank! Ich ursprünglich versucht, indem Sie alle Dateien in einer queue in ein array, aber das würde nicht funktionieren. Nur die Referenzierung der Dateien aus dem Datei-Eingang funktioniert großartig 😀 Sie hat mir geholfen, erstellen Sie diese: userscripts.org/scripts/show/158420
    • Wie dieses Beispiel zeigt, wenn Sie wollen, um separate Fortschrittsbalken für jede Datei, müssen Sie eine separate XHR für jede Datei anstelle eines XHR mit allen Dateien angehängt. Ich hatte gehofft, dass das progress-Ereignis würde einiges an meta-Daten, die zeigten, dass die Datei der Veranstaltung war die Bereitstellung von Statistiken für.
    • Für mich nicht gearbeitet xhr.addEventListener("progress", function(e){}), war die Verwendung der xhr.upload.onprogress = function(e){}
    InformationsquelleAutor Mehmet Hazar Artuner
Schreibe einen Kommentar