Plugin tải lên tệp jQuery: kích hoạt sự kiện khi tất cả các tệp được tải lên

Question

Tôi sử dụng Plugin tải lên tệp jQuery (http://blueimp.github.io/jQuery-File-Upload/) để quản lý các tệp tải lên của tôi. Nó hoạt động khá tốt.

Tôi có thể phát hiện khi từng tệp riêng lẻ được tải lên và (ví dụ) hiển thị thông báo.

Nhưng tôi muốn phát hiện khi nào mọi tệp được tải lên để hiển thị thông báo cuối cùng.

Làm như thế nào?

Dưới đây là thực hiện thực tế của tôi:

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

Chúng tôi đề nghị bạn sử dụng dừng callback:

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

Answer 2

Để thay thế cho các tùy chọn plugin và callbacks, tôi đã giải quyết vấn đề tương tự với jQuery thuần túy. Tôi có những dòng sau trong một hàm javascript mà các cuộc gọi vào nút "tải lên tất cả":

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

Answer 3

Một cách khác là sử dụng API plugin để lấy số cập nhật tích cực trong fileuploaddone callback:

var activeUploads = $ ('# fileupload'). tệp tải lên ('hoạt động');

Khi tất cả các tập tin được tải lên trên máy chủ, activeUploads == 1. Bạn có thể sau đó sử dụng nó theo cách này:

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

Hãy xem ở đây: Number of active uploads JQuery-File-Upload.

Hy vọng điều đó sẽ hữu ích!