Question

我正在使用fineuploader。当用户尝试上传重复文件时，某些上传可能会失败。我看到一个红色，显示来自服务器的错误消息。我没有看到任何取消或删除按钮，允许用户通过选择新文件重新开始。

我期待fineuploader在失败的文件上显示取消按钮，但事实并非如此。

我可以添加onError回调，然后通过添加“删除”按钮找到正确的行并显示取消或其他按钮。这听起来很混乱。

取消按钮将删除该文件，并让用户选择另一个文件。

我可以通过在设置中设置选项来添加此功能吗？

    var fileUploader = new qq.FineUploader({
        element: $('#manual-fine-uploader')[0],
        request: {
            endpoint: 'upload/UploadFiles',                    
        },
        multiple: true,
        autoUpload: false,
        validation: {},
        text: {uploadButton: '<i class="icon-plus icon-white"></i> Select File'},
        callbacks: {
            onSubmit: function (id, file) {//my custom code },
            onCancel: function(id, file){ if(filesCount>=1) filesCount--;},
            onComplete: function (id, fileName, responseJSON) {filesCount--;}
        },
        failedUploadTextDisplay: {
            mode: 'custom',
            maxChars: 40,
            responseProperty: 'error',
            enableTooltip: true
        }
    });

由于

Answer 1

Fine Uploader仅在文件上传时显示取消按钮（如果已将autoUpload选项设置为false，则在上传开始之前）。上传完成后显示取消按钮似乎对用户来说有点混乱，但我可以看到为什么你可能想要显示“删除”按钮。

您可以通过将按钮添加到模板的文件部分来轻松完成此操作。例如，您的模板可能与此类似：

<div class="qq-uploader-selector qq-uploader">
    ...
    <ul class="qq-upload-list-selector qq-upload-list">
        <li>
            ...
            <button class="remove-button-selector" style="display:none">Remove</button>
        </li>
    </ul>
</div>

然后，添加一个点击处理程序以从Fine Uploader的内部＆amp;中清除文件。用户界面：

$('#manual-fine-uploader').on("click", ".remove-button-selector", function() {
    var fileId = fileUploader.getId(this);

    fileUploader.cancel(fileId);
});

最后，在您的onComplete处理程序中，如果上传失败，请显示按钮：

onComplete: function(id, name, response, xhr) {
    var fileItemEl = fileUploader.getItemByFileId(id);

    if (!response.success) {
        $(fileItemEl).find(".remove-button-selector").show();
    }
}

此外，由于您已在项目中使用jQuery，我强烈建议您使用Fine Uploader jQuery插件。它会让你的生活更轻松。

如何在fineuploader中显示上传失败的取消按钮？

1 个答案: