HTML5 如何拖放文件夹?

23 min read

HTML5本身并不支持直接拖放文件夹。但是可以使用JavaScript库来实现拖放文件夹的功能。

一种方法是使用第三方库如Dropzone.js或FileDrop.js。这些库提供了丰富的API和事件以处理文件和文件夹的拖放操作。例如，Dropzone.js可以通过设置accept选项来限制仅接受文件夹类型的拖放。

另一种方法是使用Web API中的webkitdirectory属性。该属性允许用户选择和拖放文件夹，但是目前仅仅支持WebKit浏览器（例如Chrome和Safari）。

以下是一个使用Dropzone.js来实现拖放文件夹的示例：

  1. 首先，在HTML中引入Dropzone.js库和相关的CSS文件：
<link rel="stylesheet" type="text/css" href="path/to/dropzone.css">
<script src="path/to/dropzone.js"></script>
  1. 创建一个<div>元素来作为文件夹拖放区域：
<div id="my-dropzone" class="dropzone"></div>
  1. 在JavaScript中初始化Dropzone：
Dropzone.options.myDropzone = {
  acceptedFiles: null, // 允许任何类型的文件或文件夹
  init: function () {
    this.on("addedfile", function (file) {
      // 处理单个文件或文件夹添加事件
      if (file.webkitRelativePath) {
        // 文件夹
        console.log("文件夹：" + file.name);
      } else {
        // 文件
        console.log("文件：" + file.name);
      }
    });
  },
};

这样，当用户将文件夹或文件拖放到拖放区域时，Dropzone会触发addedfile事件，并使用webkitRelativePath属性来判断是文件夹还是文件。