Dropzone.js 接受的文件不适用于拖放答案

【问题标题】：Dropzone.js acceptedFiles not working with drag&dropDropzone.js 接受的文件不适用于拖放
【发布时间】：2023-03-11 09:40:08
【问题描述】：

我已将 Dropzone 设置为仅接受这些文件：

acceptedFiles:
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword",

还尝试了其他两种方式：

acceptedFiles: ".docx, .doc",

acceptedFiles:
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword, .docx, .doc",

但不适用于拖放。它仅适用于“可点击”选项，因此 fileInput 正在完成他的工作。

函数 getAcceptedFiles() 返回一个空数组[]。仅显示已删除文件的视觉效果。我错过了什么吗？我必须手动将它们从预览中排除？

感谢您的帮助。

【问题讨论】：

accept 的默认实现会根据该列表检查文件的 mime 类型或扩展名。这是一个逗号分隔的 mime 类型或文件扩展名列表。例如：image/*,application/pdf,.psd 如果 Dropzone 是可点击的，此选项也将用作隐藏文件输入的accept 参数。您可以查看示例：jsfiddle.net/sivard/yb44p12m

标签： dropzone.js

【解决方案1】：

似乎没有默认实现。您必须实现拖放的逻辑。

    const maxFilesNumber = 1;
    //after complete adding files, remove if not accepted or maxFilesNumber reached
        dropzone.on("complete", (file) => {
          if (!file.accepted || dropzone.files.length > maxFilesNumber)
            dropzone.removeFile(file);
        });
    
    dropzone.on("maxfilesreached", () => dropzone.disable() );
    
    //reset event is fired when files in dropzone are 0
    dropzone.on("reset", () => dropzone.enable() );

【讨论】：