jquery - Dropzone.js 在文件预览中拒绝了文件

Question

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

是否有一些选项可以仅显示消息并阻止创建(或显示)元素的其余部分？或者文件拒绝时触发的事件？我注意到被拒绝文件的元素有类“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);});
        }
    });
});