jQuery文件上传插件:当所有文件都上传时触发一个事件

jQuery File Upload Plugin: trigger an event when all files are uploaded

本文关键字：文件 一个 事件 插件 jQuery      更新时间：2023-09-26

我使用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%');
        }            
    });

建议您使用停止回调：

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

另一种方法是使用插件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
    }
}

看看这里：活动上传的数量JQuery文件上传。

希望它能有所帮助！

作为插件选项和回调的替代方案，我用纯jQuery解决了同样的问题。在一个调用"上传所有"按钮的javascript函数中，我有以下几行：

    $(document).ajaxStop(function(){
        alert('All uploads done');
        $(this).unbind("ajaxStop");
    });
相关文章：