我使用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%');
}
});
答案 0 :(得分:9)
答案 1 :(得分: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。
希望它有所帮助!
答案 2 :(得分:0)
作为插件选项和回调的替代方案,我用纯jQuery解决了同样的问题。我在调用“全部上传”按钮的javascript函数中有以下几行:
$(document).ajaxStop(function(){
alert('All uploads done');
$(this).unbind("ajaxStop");
});