jQuery File Upload Plugin: attiva un evento quando tutti i file sono stati caricati

Question

Io uso il jQuery File Upload Plugin (http://blueimp.github.io/jQuery-File-Upload/) per gestire i miei caricamenti di file. Funziona piuttosto bene.

Sono in grado di rilevare quando ogni singolo file viene caricato e (ad esempio) visualizzare un messaggio.

Ma vorrei rilevare quando vengono caricati tutti i file per visualizzare un messaggio finale.

Come fare una cosa del genere?

Qui di seguito è la mia effettiva attuazione:

$('#fileupload').fileupload({ 
     url: "api/fileManager", 
     dataType: 'json', 
     maxFileSize: 100000000, // 100 MB for testing! 
     dropZone: $(document.body) 
    }).on('fileuploadchange', function (e, data) { 
     // nothing here 
    }).on('fileuploaddrop', function (e, data) { 
     // nothing here 
    }).on('fileuploadsend', function (e, data) { 
     // displaying the loading & progress bar 
     $('#loading').show().html('<small><b>' + rscTransport.loading + '</b></small>'); 
     $('#progress').show(); 
    }).on('fileuploaddone', function (e, data) { 
     // here this is called for each individual file 
     if (typeof data.result != 'undefined') { 
      ctxTransport.getDocumentsByType(data.result.typeId, documents); 
      log('Fichier chargé avec succès.', '', true); 
     } else { 
      logError('Pas de réponse du serveur.'); 
     }    
    }).on('fileuploadfail', function (e, data) { 
     alert('Error: ' + data.jqXHR.statusText + ' : ' + data.jqXHR.responseText); 
     $('#loading').empty().hide(); 
     $('#progress').hide(); 
     $('#progress .bar').css('width', '0%'); 
    }).on('fileuploadprocessalways', function (e, data) { 
     // nothing here 
    }).on('fileuploadprogressall', function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#loading').html('<small><b>' + rscTransport.loading + progress + '% </b></small>'); 
     $('#progress .bar').css('width', progress + '%'); 
     if (data.loaded == data.total) { 
      $('#loading').empty().hide(); 
      $('#progress').hide(); 
      $('#progress .bar').css('width', '0%'); 
     }    
    }); 

Answer 1

Si consiglia di utilizzare il fermata callback:

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#stop

Answer 2

In alternativa alle opzioni del plugin e callback, I' Ho risolto lo stesso problema con jQuery puro. Ho le seguenti righe in una funzione JavaScript che chiama il pulsante "upload tutti":

$(document).ajaxStop(function(){ 
     alert('All uploads done'); 
     $(this).unbind("ajaxStop"); 
    }); 

Answer 3

Un altro modo è usare il plugin API per recuperare il numero di upload attivi in ​​fileuploaddone callback:

var activeUploads = $ ('# fileupload'). fileupload ('attivo');

Quando tutti i file vengono caricati sul server, activeUploads == 1. è possibile utilizzare in questo modo:

var $fileInput = $('#fileupload'); 

$fileInput.on('fileuploaddone', function(e, data) { 
    var activeUploads = $fileInput.fileupload('active'); 
    if(activeUploads == 1) { 
     console.info("All uploads done"); 
     // Your stuff here 
    } 
} 

dare uno sguardo qui: Number of active uploads JQuery-File-Upload.

Spero che aiuti!