javascript jQuery File Upload Plugin：上传所有文件时触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17573133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery File Upload Plugin: trigger an event when all files are uploaded
提问by Bronzato
I use the jQuery File Upload Plugin (http://blueimp.github.io/jQuery-File-Upload/) to manage my file uploads. It works pretty well.
我使用 jQuery 文件上传插件 ( http://blueimp.github.io/jQuery-File-Upload/) 来管理我的文件上传。它工作得很好。
I can detect when each individual file is uploaded and (for example) display a message.
我可以检测每个文件何时上传并（例如）显示一条消息。
But I would like to detect when every files are uploaded to display a final message.
但我想检测每个文件何时上传以显示最终消息。
How to do such thing?
这样的事情怎么办？
Below is my actual implementation:
下面是我的实际实现：
$('#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%');
}
});
回答by ravibhagw
It is recommended that you use the stopcallback:
建议您使用停止回调：
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#stop
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#stop
回答by BoCyrill
One another way is using the plugin API to retrieve the number of active uploads in fileuploaddone callback:
另一种方法是使用插件 API 在 fileuploaddone 回调中检索活动上传的数量：
var activeUploads = $('#fileupload').fileupload('active');
var activeUploads = $('#fileupload').fileupload('active');
When all files are uploaded on the server, activeUploads == 1. You can then use it this way:
当所有文件都上传到服务器上时，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
}
}
Take a look here: Number of active uploads JQuery-File-Upload.
看看这里：Number of active uploads JQuery-File-Upload。
Hope it helps!
希望能帮助到你！
回答by XaviQV
As an alternative to the plugin options and callbacks, I've solved the same issue with pure jQuery. I have the following lines in a javascript function that calls the "upload all" button:
作为插件选项和回调的替代方案，我已经用纯 jQuery 解决了同样的问题。我在调用“全部上传”按钮的 javascript 函数中有以下几行：
$(document).ajaxStop(function(){
alert('All uploads done');
$(this).unbind("ajaxStop");
});
