jQuery-file-upload, wie man die Anzahl der Dateien in der Warteschlange und hochgeladen

Basierend auf API-Dokumentation können Sie "Callback Options" zu binden-Ereignis während dem hochladen.

$('#fileupload')
    .bind('fileuploadadd', function (e, data) {/* ... */})
    .bind('fileuploadsubmit', function (e, data) {/* ... */})
    .bind('fileuploadsend', function (e, data) {/* ... */})
    .bind('fileuploaddone', function (e, data) {/* ... */})
    .bind('fileuploadfail', function (e, data) {/* ... */})
    .bind('fileuploadalways', function (e, data) {/* ... */})
    .bind('fileuploadprogress', function (e, data) {/* ... */})
    .bind('fileuploadprogressall', function (e, data) {/* ... */})
    .bind('fileuploadstart', function (e) {/* ... */})
    .bind('fileuploadstop', function (e) {/* ... */})
    .bind('fileuploadchange', function (e, data) {/* ... */})
    .bind('fileuploadpaste', function (e, data) {/* ... */})
    .bind('fileuploaddrop', function (e, data) {/* ... */})
    .bind('fileuploaddragover', function (e) {/* ... */})
    .bind('fileuploadchunksend', function (e, data) {/* ... */})
    .bind('fileuploadchunkdone', function (e, data) {/* ... */})
    .bind('fileuploadchunkfail', function (e, data) {/* ... */})
    .bind('fileuploadchunkalways', function (e, data) {/* ... */});
    //and some Processing Callback Options
    .bind('fileuploadprocessstart', function (e) {/* ... */})
    .bind('fileuploadprocess', function (e, data) {/* ... */})
    .bind('fileuploadprocessdone', function (e, data) {/* ... */})
    .bind('fileuploadprocessfail', function (e, data) {/* ... */})
    .bind('fileuploadprocessalways', function (e, data) {/* ... */})
    .bind('fileuploadprocessstop', function (e) {/* ... */});

Den Sie suchen, ist :

hinzufügen

Add-callback kann verstanden werden als callback für den Datei-upload
Anfrage-Warteschlange. Sie wird aufgerufen, sobald Dateien Hinzugefügt werden
fileupload-widget - per file-input-Auswahl, drag & drop-oder add-API-Aufruf.

Und auch :

processdone

Rückruf für das erfolgreiche Ende eine einzelne Datei Verarbeitung
queue.

Example: function (e, data) {
     console.log('Processing ' + data.files[data.index].name + ' done.'); 
}

Nur eine variable zu Inkrementieren und verwalten Ihrer Anzeige.

Aufpassen, nicht auch forgotting Fehlerbehandlung (mit Prozess-fail-event), wenn ein Fehler Auftritt, zum anzeigen der richtigen Schnittstelle.

Um zu wissen, wie viele Dateien, die Sie senden, benutzen Sie einfach add events zu verfolgen Ihre variable.

Es gibt einige Funktion, die Sie anrufen können, um diese Werte würde ich aber nicht empfehlen da die Veranstaltung verbindlich errichtet wurde, die speziell zu halten Ihre code synchronisiert, zu jeder Zeit.

Über die Seite aktualisieren

Müssen Sie eine sessionStorage zu halten Werte beim aktualisieren einer Seite. Der einfachste Weg ist, aktualisieren Sie diesen Wert immer, wenn sich Ihre number_of_files ändern. (siehe Dokument auf MDN)

//Save data to sessionStorage
sessionStorage.setItem('key', 'value');

//Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

Brauchen Sie nur auf die Last (oder der Initialisierung des upload-plugin), um diesen Wert und den ursprünglichen Wert der variable ... diese Weise können Sie verfolgen, von der vorherigen Sitzung.

Vorschlag von code

var counter = 0;
var number_of_files = 0; //or sessionStorage.getItem('number_of_files')
$('#fileupload')
    .bind('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            console.log('Added file in queue: ' + file.name);
            number_of_files = number_of_files + 1;
            sessionStorage.setItem('number_of_files', number_of_files);
        });
    })
    .bind('fileuploadprocessdone', function (e, data) {
        console.log(counter + " /" + number_of_files);
    });

Müssen Sie nur alle groß - /Kleinschreibung im code, wie Löschung, änderung und andere ... um sicherzustellen, dass Ihr Wert ist immer up to date. Aber jQuery-File-Upload wird nicht angenommen zu werden, in der Sie Ihre Ansicht, als Teil des MVC-Musters, ist es nur eine Sache zu tun, die wird hochladen und geben Ihnen alle Werkzeuge, um mit zu arbeiten, dass