如何不修改dropzone.js源码实现禁止拖拽文件夹并重写drop事件

不需要修改dropzone源码，直接覆盖实例的drop方法即可实现需求，具体实现如下：

基础实现（单文件/仅判断第一个拖拽项） #

// 初始化你的Dropzone实例，保留原有配置
const myDropzone = new Dropzone("#上传区域的DOM选择器", {
  url: "你的上传接口地址",
  // 其他原有配置项，比如文件大小限制、接受的文件类型等
});

// 重写drop事件处理逻辑
myDropzone.drop = function(e) {
  if (!e.dataTransfer) {
    return;
  }

  this.emit("drop", e); 

  // 兼容IE11转换FileList为数组
  const files = [];
  for (let i = 0; i < e.dataTransfer.files.length; i++) {
    files[i] = e.dataTransfer.files[i];
  }

  if (files.length) {
    const items = e.dataTransfer.items;
    if (items && items.length && typeof items[0].webkitGetAsEntry === "function") {
      // 判断拖拽的是否为文件夹
      const isDirectory = items[0].webkitGetAsEntry().isDirectory;
      if (isDirectory) {
        // 可自行替换为项目内的提示组件
        alert("暂不支持文件夹上传，请选择文件");
        return;
      }
      this._addFilesFromItems(items);
    } else {
      this.handleFiles(files);
    }
  }

  this.emit("addedfiles", files);
}

优化实现（支持多文件拖拽，全量校验是否包含文件夹） #

如果你的上传区域允许多文件同时拖拽，需要遍历所有拖拽项判断是否存在文件夹，避免出现同时拖拽文件+文件夹漏判的情况：

myDropzone.drop = function(e) {
  if (!e.dataTransfer) {
    return;
  }

  this.emit("drop", e); 

  const files = [];
  for (let i = 0; i < e.dataTransfer.files.length; i++) {
    files[i] = e.dataTransfer.files[i];
  }

  if (files.length) {
    const items = e.dataTransfer.items;
    if (items && items.length && typeof items[0].webkitGetAsEntry === "function") {
      let hasFolder = false;
      // 遍历所有拖拽项判断是否存在文件夹
      for (const item of items) {
        const entry = item.webkitGetAsEntry();
        if (entry && entry.isDirectory) {
          hasFolder = true;
          break;
        }
      }
      if (hasFolder) {
        alert("暂不支持文件夹上传，请选择文件");
        return;
      }
      this._addFilesFromItems(items);
    } else {
      this.handleFiles(files);
    }
  }

  this.emit("addedfiles", files);
}

说明 #

• 不支持webkitGetAsEntry接口的浏览器本身无法识别拖拽的文件夹，会直接走原有handleFiles逻辑，不会触发递归读取文件夹导致页面卡死的问题。
• 可以根据项目需求自行替换文件夹判定后的提示逻辑，不需要的话也可以直接return静默拦截。

内容的提问来源于stack exchange，提问作者Shahram