DropzoneJS：防止上传和显示不受支持的文件答案

【问题标题】：DropzoneJS: Prevent uploading and displaying unsupported filesDropzoneJS：防止上传和显示不受支持的文件
【发布时间】：2017-10-10 06:07:34
【问题描述】：

对于我的项目，我使用的是拖放库 DropzoneJS。它工作得很好，但我想要一个特定的功能（据我所知）不支持“开箱即用”。

在我的 Dropzone 配置中，我指定了接受的文件：

acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"

当我使用浏览按钮时，它会自动检查文件是否受支持。但是当我拖放文件时，检查是在上传完成后完成的，并显示带有错误消息的文件。

我想要实现的是拖放首先检查文件是否受支持，并自动丢弃不受支持的文件。我仍然想显示一条错误消息，指出某些文件不受支持。

作为参考，这是我完整的 Dropzone 配置：

import Dropzone from 'dropzone';

export default class UI_DropZone {
  constructor() {
    if (document.querySelector('#dropZone')) {
      let previewNode = document.querySelector("#template");
      previewNode.id = "";
      let previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);

      return new Dropzone("#dropZone", {
        url: "/dist/files",
        thumbnailWidth: 300,
        thumbnailHeight: 300,
        parallelUploads: 20,
        maxFilesize: 10,
        acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
        previewTemplate: previewTemplate,
        previewsContainer: '#previews',
        clickable: '.fileinput-button',
        autoProcessQueue: false
      });
    }
  }
}

【问题讨论】：

标签： javascript drag-and-drop dropzone.js

【解决方案1】：

myDropzone.on("error", function(file, message, xhr) {
                if(xhr == null) myDropzone.removeFile(file);
                alert(message)
            });

【讨论】：

【解决方案2】：

如果出现问题，您可以捕获错误并通过某种通知删除文件：

init: function() {
    this.on("error", function(file, message, xhr) { 
       if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
       alert(message);
    });
 }

所以你的配置看起来像这样：

return new Dropzone("#dropZone", {
    url: "/dist/files",
    thumbnailWidth: 300,
    thumbnailHeight: 300,
    parallelUploads: 20,
    maxFilesize: 10,
    acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
    previewTemplate: previewTemplate,
    previewsContainer: '#previews',
    clickable: '.fileinput-button',
    autoProcessQueue: false,
    "error": function(file, message, xhr) {
       if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
       alert(message);
    }
});

示例：https://jsfiddle.net/m4ye8gL2/1

【讨论】：

我正在上传多个文件，我想让事务原子化。因此，如果一个文件失败，我不想手动删除所有其他文件。在开始上传任何文件之前，有什么方法可以在某些文件上抛出/显示我的自定义错误？我找不到任何在文件上引发错误的方法。