使用 fine-uploader core 适当取消

Question

我正在尝试使用精细上传器实现多上传器。我正在为此构建自己的 UI。基本上它按预期工作（选择多个文件 - >上传就好了）但是当我这样做时：

添加文件1
添加文件2
删除文件 2（调用 cancel(id)）-> 状态更改为已取消
添加文件3

正在上传第一个文件，但随后出现异常：错误：[Fine Uploader 5.11.8] 1 不是要上传的有效文件 ID！（指的是 deleted/cancelled 文件）第三个文件没有上传了。

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

取消的块已正确删除，文件 ID 的状态更新也可以取消。

关于我遗漏了什么的任何提示？

核心
传统端点
v5.11.8
jquery 2.2

Answer 1

Fine Uploader 的 API 希望 ID 是一个数字。让我们看看您对 cancel method:

的调用

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

jQuery 的 attr 方法总是 returns 一个字符串。同样，Fine Uploader ID 是数字。您可以使用 parseInt() 将此字符串转换为数字。要解决此问题，您的 cancelBlock 方法应如下所示：

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

另外，请考虑放弃jQuery，尤其是在使用Fine Uploader的时候。绝对有no benefit to using Fine Uploader's jQuery wrapper, and very little benefit to using jQuery elsewhere, given the advancements in JavaScript and the web API。

使用 fine-uploader core 适当取消

proper cancel with fine-uploader core

jquery

fine-uploader