Question

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

添加file1
添加文件2
删除file2（调用取消（id）） - ＆gt;状态更改为已取消
添加文件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的状态更新也没问题。

我缺少什么提示？

core
传统端点
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。

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

1 个答案: