blueimp jquery-file-upload |多個實例和

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

到目前爲止，這麼好。
上傳和全局progress-bar/-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(); 
}); 
// ... 

我綁定的全球Start Upload - 按鈕的click事件，然後觸發每個面板自我click（「開始」）事件。
請記住，你隱藏Start Upload -Buttons從面板和文件表與jQuery或CSS的樣式。

在這裏，整個代碼：

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