停止在 dropzone 中删除文件夹答案

【问题标题】：Stop dropping folders in dropzone停止在 dropzone 中删除文件夹
【发布时间】：2021-12-05 20:06:12
【问题描述】：

我正在使用dropzone.js，我想防止删除文件夹，因为如果嵌套文件夹中有数千个文件，它会递归删除文件夹，这可能会导致页面冻结。我该怎么做？

让我更详细地解释一下。下面是 dropzone 处理“drop”事件的方式：

{
key: "drop",
value: function drop(e) {
  if (!e.dataTransfer) {
    return;
  }

  this.emit("drop", e); // Convert the FileList to an Array
  // This is necessary for IE11

  var files = [];

  for (var i = 0; i < e.dataTransfer.files.length; i++) {
    files[i] = e.dataTransfer.files[i];
  } // Even if it's a folder, files.length will contain the folders.


  if (files.length) {
    var items = e.dataTransfer.items;

    if (items && items.length && items[0].webkitGetAsEntry != null) {
      // The browser supports dropping of folders, so handle items instead of files
      this._addFilesFromItems(items);
    } else {
      this.handleFiles(files);
    }
  }

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

我想对此进行更改以防止删除文件夹，但我不想操纵 dropzone 源代码：

{
key: "drop",
value: function drop(e) {
  if (!e.dataTransfer) {
    return;
  }

  // ...

  if (files.length) {
    var items = e.dataTransfer.items;

    if (items && items.length && items[0].webkitGetAsEntry != null) {
      // Here is the change
      var folder = items[0].webkitGetAsEntry().isDirectory;
      if (folder) {
        return;
      }
      this._addFilesFromItems(items);
    } else {
      this.handleFiles(files);
    }
  }

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

那么，我怎样才能覆盖“drop”事件呢？

【问题讨论】：

标签： dropzone.js

【解决方案1】：

我试图通过删除 dropzone 的默认“drop”事件侦听器并添加我自己的侦听器来解决问题。

顺便说一句，我使用 DOM removeEventListener 删除了事件监听器，因为 dropzone 使用 DOM addEventListener 添加了监听器。

【讨论】：

【解决方案2】：

只需将隐藏文件输入的webkitdirectiory-attribute设置为False即可。这将只允许上传（独立）文件。

$("div#dropzoneDiv").dropzone({
            url: '/upload',
            init: function() {
                this.hiddenFileInput.setAttribute("webkitdirectory", false);
            }
        });

【讨论】：