правильная отмена с ядром Fine-uploader

Я пытаюсь реализовать множественный загрузчик с помощью Fine-uploader. Я создаю свой собственный интерфейс для него. В основном это работает по назначению (выбор нескольких файлов -> загрузка просто отлично). Но когда я это делаю:

  1. добавить файл1
  2. добавить файл2
  3. удалить файл2 (вызов отмены (идентификатор)) -> статус изменяется на отменено
  4. добавить файл3

первый файл загружается, но затем я получаю исключение: Ошибка: [Fine Uploader 5.11.8] 1 не является допустимым идентификатором файла для загрузки! (который относится к удаленному/отмененному файлу) третий файл больше не загружается.

    $(document).ready(function () {
    $messages = $('#messages');
    $("#uploader").fineUploader({
        uploaderType: 'basic',
        element: $('#uploader'),
        button: $('.img-upload-button'),
        debug: true,
        autoUpload: false,
        multiple: true,
        sizeLimit: 209715200,
        request: {
            endpoint: '/handler?action.uploadImage'
        }
    }).on('submit', function(event, id, fileName) {
        $messages.html('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0">onSubmit</div>');
        addBlock(id, fileName);
    }).on('upload', function(event, id, fileName) {
        $('#file-' + id).addClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="Initializing. Please hold." style="width: auto;"> ' + 'Initializing ' + '“' + fileName + '”');
    }).on('progress', function(event, id, fileName, loaded, total) {
        console.log('progress: ' + loaded);
        if (loaded < total) {
            progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
            $('#file-' + id).removeClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="In progress. Please hold."> ' + 'Uploading ' + '“' + fileName + '” ' + progress);
        } else {
            $('#file-' + id).addClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="Saving. Please hold."> ' + 'Saving ' + '“' + fileName + '”');
        }
    }).on('complete', function(event, id, fileName, responseJSON) {
        console.log('ID: '+id);
        console.log('fileName: '+fileName);
        if (responseJSON.success === true) {
            $('#file-' + id).addClass('alert-info').html('<div>success</div>');
        } else {
            $('#file-' + id).addClass('alert-info').html('<div>fail</div>');
        }
    }).on('cancel', function(event, id, fileName) {
        $('.block' + id).remove();
    });

РЕДАКТИРОВАТЬ: с обработчиком кнопок:

function addBlock(id, fileName) {
    // inserts a file representation block dynamically
    ... 
    insert button: <input class="img-delete" type="button" value="delete" data="' + id + '">
    ...
    $('.file-list').on("click", ".img-delete", cancelBlock);
}
function cancelBlock() {
    // removes a cancelled block
    var id = $(this).attr("data");
    $("#uploader").fineUploader('cancel', id);
}

$('#trigger-upload').click(function() {
    $('#uploader').fineUploader('uploadStoredFiles');
});

отмененный блок удаляется правильно, и обновление статуса в идентификаторе файла для отмены также в порядке.

любые намеки на то, что мне не хватает?

  • основной
  • традиционная конечная точка
  • v5.11.8
  • jquery 2.2

jquery fine-uploader
person rome    schedule 04.11.2016    source источник
comment
Вам нужно будет показать код, который пытается отменить загрузку, так как именно в этом заключается ваша проблема.   -  person Ray Nicholus    schedule 04.11.2016
comment
привет @RayNicholus, я отредактировал свой пост. спасибо за просмотр   -  person rome    schedule 04.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

API Fine Uploader ожидает, что идентификаторы будут числовыми. Давайте посмотрим на ваш вызов метода cancel:

function cancelBlock() {
    // removes a cancelled block
    var id = $(this).attr("data");
    $("#uploader").fineUploader('cancel', id);
}

Метод jQuery attr всегда возвращает строку. Опять же, идентификаторы Fine Uploader — это числа. Вы можете преобразовать эту строку в число, используя parseInt(). Чтобы решить эту проблему, ваш метод cancelBlock должен выглядеть так:

function cancelBlock() {
    // removes a cancelled block
    var id = parseInt($(this).attr("data"));
    $("#uploader").fineUploader('cancel', id);
}

Кроме того, рассмотрите возможность отказа от jQuery, особенно при использовании Fine Uploader. Нет абсолютно использования jQuery-оболочки Fine Uploader и очень мало пользы от использования jQuery в других местах, учитывая достижения в JavaScript и веб-API.

person Ray Nicholus    schedule 04.11.2016
comment
Спасибо, Рэй, работает нормально. да, я читал о бесполезности jQuery, но, поскольку jquery все равно участвует в проекте, я хочу оставить его таким. - person rome; 06.11.2016