blueimp jquery-file-upload | Несколько экземпляров и одна глобальная кнопка загрузки

Question

blueimp jquery-file-upload | Несколько экземпляров и одна глобальная кнопка загрузки

0

Я использую 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 для каждого экземпляра, все работает нормально.
Но как я могу использовать глобальную кнопку для запуска загрузки вместо моего разрешения?

FunkeMT 19 фев. 2014, в 17:22

Источник

Теги:

javascript

jquery

file-upload

jquery-file-upload

blueimp

1 ответ

Ещё вопросы

FunkeMT · Answer 1 · 2014-02-20T07-46-00.000Z

Не лучшее решение, но я нашел обходное решение, которое решает мою проблему.

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

Я привязываю событие click к глобальному Start Upload -Button и запускает событие click ("start") на каждой панели.
Имейте в виду, что вы скрываете Start Upload -Button s с панелями и файловую таблицу с помощью jQuery или CSS-Styles.

Здесь весь код:

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