使用一次输入处理 directory/files 上传 javascript

Question

我想允许用户拖拽和上传目录和文件。

我知道我可以创造

<input type="file" multiple />
<!-- for files/multiple files upload-->

和

<input type="file" directory mozDirectory webkitDirectory />
<!-- for directory uploads -->

我尝试在用户拖动项目时检测它是否是目录或文件，并根据它设置目录属性，但结果是 javascript 不允许您检查。

我在很多网站上也看到用户可以将文件和目录拖在一起甚至多个目录。

我怎样才能做到这一点？

Answer 1

在 Chrome >= 21

中可以拖放文件夹

这是你需要的（没试过，但可以给你思路）：

function traverseFileTree(item, path) {
  path = path || "";
  if (item.isFile) {
    // Get file
    item.file(function(file) {
      console.log("File:", path + file.name);
    });
  } else if (item.isDirectory) {
    // Get folder contents
    var dirReader = item.createReader();
    dirReader.readEntries(function(entries) {
      for (var i=0; i<entries.length; i++) {
        traverseFileTree(entries[i], path + item.name + "/");
      }
    });
  }
}

dropArea.addEventListener("drop", function(event) {
  event.preventDefault();

  var items = event.dataTransfer.items;
  for (var i=0; i<items.length; i++) {
    // webkitGetAsEntry is where the magic happens
    var item = items[i].webkitGetAsEntry();
    if (item) {
      traverseFileTree(item);
    }
  }
}, false);

可以找到更多信息here

答案取自here

使用一次输入处理 directory/files 上传 javascript

Handle directory/files upload with one input javascript

html

javascript

html5-filesystem