Dropzone.js 文件预览中被拒绝的文件

Question

我有一个用于文档上传的简单 dropzone 实例（仅限特定文件扩展名）。当我在 dropzone 元素上放置一个具有非所需扩展名的文件时，它会显示一条关于文件扩展名错误的消息（这没关系），并创建与为有效文件创建的元素相同的元素。

是否有一些选项可以只显示消息并阻止创建（或显示）元素的其余部分？或者文件拒绝时触发的事件？我注意到被拒绝文件的元素有 class 'dz-error'，所以我想我可以在 fileAdded 回调中以某种方式使用它，但我也认为必须有更好的方法。以下JS代码供参考

var accept = ".pdf,.doc,.docx,.odt";

$(document).ready(function(){
    var DZ = $(dropzoneSelector).dropzone({
        url: "example/url",
        autoProcessQueue: false,
        uploadMultiple: true,
        clickable: clickableSelector,
        addRemoveLinks: true,
        acceptedFiles: accept,
        createImageThumbnails: false,
        init: function(){
            this.on("addedfile", handleFileAdded);
            this.on("removedfile", handleFileRemoved);
        }
    });
});

Answer 1

您可以监听 error 事件，然后检查文件是否被接受，如果不接受则将其删除。您的代码如下所示：

var accept = ".pdf,.doc,.docx,.odt";

$(document).ready(function(){
    var DZ = $(dropzoneSelector).dropzone({
        url: "example/url",
        autoProcessQueue: false,
        uploadMultiple: true,
        clickable: clickableSelector,
        addRemoveLinks: true,
        acceptedFiles: accept,
        createImageThumbnails: false,
        init: function(){
            this.on("addedfile", handleFileAdded);
            this.on("removedfile", handleFileRemoved);
            this.on("error", function(file){if (!file.accepted) this.removeFile(file);});
        }
    });
});

Dropzone.js 文件预览中被拒绝的文件

Dropzone.js rejected files in file previews

jquery

dropzone.js