Valums Ajax Uploader (Mutli) - Erkennen, wenn alle Dateien hochgeladen sind

Question

Ich verwende den Valums Ajax Uploader, um eine Reihe von Dateien hochzuladen. Wir haben vor kurzem den Code von einem Single-Upload zu einem Multi-Upload-Typ geändert. Dies hat ein Problem mit unserem Code aufgeworfen.

Wie Sie sehen können, wenn die onComplete auslösen, wird die Seite neu geladen, um die neu hochgeladenen Bilder anzuzeigen. Allerdings ist das onComplete Ereignis scheint nach Abschluss JEDER Datei ausgelöst zu werden und nicht nach Abschluss des gesamten Stapels. Dies führt nun zu einem Problem, denn wenn die erste Datei abgeschlossen ist, wird der Versuch, die Seite neu zu laden, ausgelöst, und der Uploader zeigt eine Warnung an: "Wenn Sie diese Seite verlassen, wird bei den verbleibenden Uploads der Teufel los sein" - oder etwas in dieser Art.

Ich bemerke die onComplete Ereignis sendet eine 0-basierte ID der abgeschlossenen Datei zurück, aber ich bin mir nicht sicher, wie ich diese verwenden kann, um festzustellen, wann der Stapel abgeschlossen ist.

Ich schätze, meine Frage ist A) Gibt es ein anderes Ereignis, das ausgelöst wird, wenn alle Dateien vollständig sind, oder B) Wie stelle ich fest, wie viele Dateien der Benutzer ausgewählt hat, um den Überblick in der onComplete Wie viele Dateien wurden abgeschlossen?

    var uploader = new qq.FileUploader({
        multiple: true,
        element: document.getElementById('file-uploader'),
        action: '/projectPhotoUpload.php',
        allowedExtensions: ['jpg', 'png', 'gif'],
        debug: true,
        params: {id: i},
        onComplete: function(id, fileName, responseJSON){
            window.location = 'projects.php?all=true&tab=1&sel=' + currProject;                                 
        }   
    })

Answer 1

Sie könnten einen Zähler hinzufügen, der sich erhöht, wenn ein Upload gestartet wird, und sich verringert, wenn er abgeschlossen ist. Die Umleitung erfolgt nur, wenn der Zähler 0 ist.

var running = 0;  
var uploader = new qq.FileUploader({
    multiple: true,
    element: document.getElementById('file-uploader'),
    action: '/projectPhotoUpload.php',
    allowedExtensions: ['jpg', 'png', 'gif'],
    debug: true,
    params: {id: i},
    onSubmit: function(id, fileName){
        running++;                                 
    },
    onComplete: function(id, fileName, responseJSON){
        running--;
        if(running==0){
          window.location = 'projects.php?all=true&tab=1&sel=' + currProject;                                 
        }
    }   
})

Answer 2

Gute Antwort, aus Interesse, wenn Sie die responseJSON überprüfen wollten, um zu sehen, ob die Dateien hochgeladen wurden, ist es auf dem Server-Skript eingestellt

return array('success'=>true, 'filename'=>$filename . '.' . $ext);

Dann können Sie es im JS abholen wie

var success = responseJSON["success"]
var filename = responseJSON["filename"]

Auf diese Weise könnten Sie eine Liste von Dateien erstellen und die Namen bei Fertigstellung überprüfen oder nur die

if (success == true)

Wenn der Upload fehlgeschlagen ist, möchten Sie vielleicht nicht, dass er dekrementiert wird, zum Beispiel

Answer 3

Sie müssen ein Abbruchereignis hinzufügen, falls der Benutzer den Datei-Upload abbricht:

onCancel: function(id, fileName){running--;}

Ich bin am Überlegen, wie ich bei der Umsetzung vorgehen soll. Ich möchte auch, dass die Seite umgeleitet wird, sobald die Dateien hochgeladen sind, aber was ist, wenn der Benutzer beabsichtigt, mehr Dateien hochzuladen; die Dateien können in verschiedenen Verzeichnissen verteilt sein.

Am besten ist es wohl, eine Schaltfläche "Ich bin fertig" einzurichten, die den Benutzer weiterleitet, sobald er mit dem Hochladen fertig ist.

Answer 4

Eine einfachere Möglichkeit wäre die Verwendung der inneren Eigenschaft _filesInProgress um zu prüfen, ob alle hochgeladenen Dateien behandelt wurden. Das würde ergeben:

var uploader = new qq.FileUploader({
    multiple: true,
    element: document.getElementById('file-uploader'),
    action: '/projectPhotoUpload.php',
    allowedExtensions: ['jpg', 'png', 'gif'],
    debug: true,
    params: {id: i},
    onComplete: function(id, fileName, responseJSON){
        if(uploader._filesInProgress == 0){
            window.location = 'projects.php?all=true&tab=1&sel=' + currProject;
        }                                 
    }   
});