blueimp jquery 文件上传|多个实例和一个全局上传按钮答案

【问题标题】：blueimp jquery-file-upload | Multiple instances and one global Upload-Buttonblueimp jquery 文件上传|多个实例和一个全局上传按钮
【发布时间】：2014-02-19 15:26:54
【问题描述】：

我在多个实例中使用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-Button 时，一切正常。
但是如何使用全局按钮而不是我的分辨率来开始上传？

【问题讨论】：

标签： javascript jquery file-upload jquery-file-upload blueimp

【解决方案1】：

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

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

我在global Start Upload-Button 上绑定click 事件，然后在每个面板自身上触发click（“start”）事件。
请记住，您使用 jQuery 或 CSS 样式从面板和文件表中隐藏了 Start Upload-Buttons。

这里是整个代码：

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();
});

【讨论】：