使用一个输入 javascript 处理目录/文件上传

Posted 2023-05-08

【中文标题】使用一个输入 javascript 处理目录/文件上传

【英文标题】：Handle directory/files upload with one input javascript

【发布时间】：2015-07-14 23:15:15

【问题描述】：

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

我知道我可以创造

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

和

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

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

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

我怎样才能做到这一点？

【参考方案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

【讨论】：

感谢树功能，它会很有用，但我怎么知道用户是否在输入中拖动了文件夹或项目？

我在 TypeScript 和 Firefox 中使用它，它可以工作。

@JohannesFlügel 很高兴听到这个消息.. :) 编码快乐.. 干杯。