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

Question

Ich verwende den Valums Ajax Uploader, um einen Stapel von Dateien hochzuladen. Wir haben kürzlich den Code von einem Single-Upload-Upload-Typ geändert. Dies hat ein Problem mit unserem Code verursacht.

Wie Sie sehen können, wenn das Ereignis onComplete ausgelöst wird, laden wir die Seite neu, um neu hochgeladene Bilder anzuzeigen. Das Ereignis onComplete scheint jedoch ausgelöst zu werden, nachdem jede Datei abgeschlossen wurde, und nicht nach dem gesamten Stapel. Dies führt nun zu einem Problem, denn wenn die erste Datei fertig ist, wird der Neuladeversuch der Seite ausgelöst und der Uploader zeigt eine Warnung an. "Wenn Sie diese Seite verlassen, wird sich bei Ihren verbleibenden Uploads nichts mehr ändern" - oder etwas Ähnliches.

Ich merke, das onComplete Ereignis sendet eine 0-basierte ID der fertigen Datei zurück, aber ich bin mir nicht sicher, wie genau dies zu bestimmen, wenn der Stapel fertig ist.

Ich denke, meine Frage ist A) Gibt es ein anderes Ereignis, das ausgelöst wird, wenn alle Dateien abgeschlossen sind oder B) Wie kann ich bestimmen, wie viele Dateien der Benutzer ausgewählt hat, um im Verzeichnis zu verfolgen, wie viele Dateien Ich habe beendet?

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 einen Zähler hinzufügen könnte, die erhöht, wenn ein Upload gestartet wird, und dekrementiert, wenn abgeschlossen. Nur auf vollständige umleiten, wenn der Zähler 0.

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 ist, aus Interesse, wenn Sie die responseJSON zu sehen, ob die Dateien auf dem Server-Skript seinen Satz

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

hatten hochgeladen überprüfen wollten

Dann können Sie es in der JS abholen wie

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

diese Weise erhalten Sie eine Liste von Dateien machen könnten und die Namen nach Abschluss überprüfen, oder nur verringern

if (success == true) 

Wenn der Upload gescheitert war, dann mögen Sie vielleicht nicht, dass es zum Beispiel verringern

Answer 3

Sie benötigen aus einer Datei-Upload ein Abbrechen Ereignis für den Fall, fügen Sie den Benutzer abgebrochen:

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

Ich diskutiere den richtigen Ansatz, um hier auf meine Implementierung zu nehmen. Ich möchte auch, dass die Seite umgeleitet wird, sobald die Dateien hochgeladen wurden, aber was ist, wenn der Benutzer beabsichtigt, mehr Dateien hochzuladen; Die Dateien können in separaten Verzeichnissen verteilt sein.

Es scheint, als wäre der beste Ansatz, einen "Ich bin fertig" -Button zu haben, der umgeleitet wird, sobald der Benutzer den Upload beendet hat.

Answer 4

Ein einfacherer Weg wäre, die innere Eigenschaft _filesInProgress zu verwenden, um zu überprüfen, ob alle hochgeladenen Dateien behandelt wurden. Es würde geben:

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