使用精细上传器核心正确取消

Question

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

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

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

    $(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 方法总是返回一个字符串。同样，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 和very little benefit to using jQuery elsewhere, given the advancements in JavaScript and the web API。