jQuery File Upload Plugin：在上传所有文件时触发事件

Question

我使用jQuery File Upload Plugin（http://blueimp.github.io/jQuery-File-Upload/）来管理我的文件上传。它工作得很好。

我可以检测每个单独的文件何时上传和（例如）显示消息。

但我想检测每个文件何时上传以显示最终消息。

如何做这样的事情？

下面是我的实际执行情况：

$('#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

建议您使用停止回调：

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

Answer 2

作为替代插件选项和回调，我我用纯jQuery解决了同样的问题。我在那个所谓的“全部上传”按钮，一个JavaScript函数以下行：

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

Answer 3

一另一种方式是使用插件API来获取主动上传的fileuploaddone回调数：

var activeUploads = $（'＃fileupload'）。fileupload（'active'）;

所有文件都在服务器上上传，activeUploads == 1。然后，您可以使用这种方式：

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

到这里看看：Number of active uploads JQuery-File-Upload。

希望它有帮助！