Question

我正在使用bluimp jQuery-File-Upload-plugin在多个实例中上传文件。

我使用一个按钮启动每个实例的上传过程此外，我有一个全局流程统计数据，总结了每个实例的统计数据。

statsData = new Array(); // for global progress-bar/-stats
$('.fileupload').each(function () {
    statsData.push($(this).fileupload({
        dropZone: $(this).closest('.dropzone'),
        url: 'foo/bar'
    }).on('fileuploadadd', function (e, data) {
        $("#btn-submit-all").on('click', function () {
            $('.fileupload-progress.global.fade').show();
            data.submit();
    }).on('fileuploadstart', function (e) {
        $('.fileupload-progress.panel.fade', $(this)).show();
    }).on('fileuploadprogress', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress-bar', data.context).attr('value', progress);
    }).on('fileuploadprogressall', function (e, data) {
        var progressall = parseInt(data.loaded / data.total * 100, 10);
        $('.fileupload-progress.panel .progress-bar', $(this)).attr('value', progressall);
        renderGlobalProgress(statsData);
    }).fileupload('progress'));
});

到目前为止，非常好上传和全局进度条/ -stats工作正常。

现在的问题是，当文件列表中的canceled文件时，该文件将从列表中删除（上传模板），但它仍然在“上传队列”中（filelist？）并将上传。

我将问题（可能是？）隔离到这一部分：

// ...
.on('fileuploadadd', function (e, data) {
    $("#btn-submit-all").on('click', function () {
        $('.fileupload-progress.global.fade').show();
        data.submit();
})
// ...

因为当我为每个实例使用标准Start Upload - 按钮时，一切正常但是，我如何使用全局按钮来启动上传而不是我的解决方案？

Answer 1

不是最好的解决方案，但我找到了解决我问题的解决方法。

// ...
$('#btn-submit-all').on('click', function(){
    $('form.fileupload button.start').click();
});
// ...

我将click事件绑定在全局 Start Upload - 按钮上，然后触发每个面板上的click（“开始”）事件。<登记/> 请记住，您使用jQuery或CSS-Styles隐藏面板和文件表中的Start Upload - 按钮。

这里是整个代码：

statsData = new Array(); // for global progress-bar/-stats
$('.fileupload').each(function () {
    statsData.push($(this).fileupload({
        dropZone: $(this).closest('.dropzone'),
        url: 'foo/bar'
    }).on('fileuploadstart', function (e) {
        $('.fileupload-progress.global.fade').show()
        $('.fileupload-progress.panel.fade', $(this)).show()
    }).on('fileuploadprogress', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress-bar', data.context).attr('value', progress);
    }).on('fileuploadprogressall', function (e, data) {
        var progressall = parseInt(data.loaded / data.total * 100, 10);
        $('.fileupload-progress.panel .progress-bar', $(this)).attr('value', progressall);
        renderGlobalProgress(statsData);
    }).fileupload('progress'));
});


$('#btn-submit-all').on('click', function() {
    $('form.fileupload button.start').click();
});

blueimp jquery-file-upload |多个实例和一个全局上载按钮

1 个答案: