Плагин загрузки файла jQuery: запуск события при загрузке всех файлов

Question

Я использую плагин загрузки файлов jQuery (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

В качестве альтернативы опции плагина и обратных вызовов, я ve решила ту же проблему с чистым jQuery. У меня есть следующие строки в яваскрипте функции, которая вызывает кнопку «загрузить все»:

$(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.

Надеюсь, это поможет!