Javascript HTML5是否允许拖放上传文件夹或文件夹树？

我没有看到任何这样的例子。API规范中不允许这样做吗

我正在搜索一个简单的拖放解决方案，用于上传整个文件夹树中的照片。

在HTML 5邮件列表中，Ian Hickson说：

HTML5现在必须在同一时间上传许多文件 一旦浏览器可以让用户 一次拾取多个文件，包括 跨多个目录；那是个好主意 位超出了规范的范围

（另请参见原文。） 因此，可以安全地假设他考虑使用拖放上传文件夹也不在范围之内。显然，要由浏览器来为单个文件提供服务

上传文件夹也会有一些其他困难，如所述：

这个[…]提案必须有两个方面 检查（如果可行）：

最大大小，阻止某人上载多个完整目录 一百张未压缩的原始图像

即使省略了accept属性，也会进行筛选。Mac OS元数据 和窗口缩略图等应 省略。所有隐藏的文件和 目录应默认为 排除在外

---

更新：自2012年以来发生了很多变化，请参见上面的答案。为了考古学的缘故，我把这个答案留在这里

HTML5规范并没有说，当选择要上传的文件夹时，浏览器应该递归上传所有包含的文件

实际上，在Chrome/Chrome中，你可以上传一个文件夹，但是当你上传的时候，它只会上传一个毫无意义的4KB文件，它代表了目录。一些服务器端应用程序（如）可以检测到这一点，并警告用户无法上载文件夹：

---

多亏了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);

函数traverseFileTree（项，路径）{
路径=路径| |“”；
if（item.isFile）{
//获取文件
item.file（函数（文件）{
log（“文件：”，路径+文件名）；
});
}else if（项目isDirectory）{
//获取文件夹内容
var dirReader=item.createReader（）；
dirReader.readEntries（函数（条目）{
对于（var i=0；i现在您可以通过拖放和输入上传目录

<input type='file' webkitdirectory >



用于拖放（用于webkit浏览器）

处理拖放文件夹

<div id="dropzone"></div>
<script>
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      ... // do whatever you want
    } else if (entry.isDirectory) {
      ... // do whatever you want
    }
  }
};
</script>


var dropzone=document.getElementById（'dropzone'）；
dropzone.ondrop=函数（e）{
var length=e.dataTransfer.items.length；
对于（变量i=0；i

资源：


HTML5是否允许拖放上传文件夹或文件夹树

只有Chrome支持此功能。它没有任何牵引力，可能会被移除

参考：
从2016年11月15日起，Firefox现在支持在v50.0中上传文件夹：

您可以将文件夹拖放到Firefox中，也可以浏览并选择要上载的本地文件夹。它还支持嵌套在子文件夹中的文件夹

这意味着您现在可以使用Chrome、Firefox、Edge或Opera来上载文件夹。您目前不能使用Safari或Internet Explorer。
此功能将为您提供一个所有已删除文件的阵列，如
。文件
：

函数getFilesWebkitDataTransferItems（dataTransferItems）{
函数TraverseFileTreePromission（项，路径=“”）{
返回新承诺（解决=>{
if（item.isFile）{
item.file（文件=>{
file.filepath=path+file.name//保存完整路径
文件。推送（文件）
解析（文件）
})
}else if（项目isDirectory）{
让dirReader=item.createReader（）
dirReader.readEntries（条目=>{
让entriesPromises=[]
对于（让条目输入）
entriesPromises.push（transverseFileTreePromise（entr，path+item.name+“/”））
决心（承诺、全部（承诺））
})
}
})
}
让文件=[]
返回新承诺（（解决、拒绝）=>{
让entriesPromises=[]
for（让其包含dataTransferItems）
entriesPromises.push（traverseFileTreePromise（it.webkitGetAsEntry（）））
全部承诺（全部承诺）
。然后（条目=>{
//console.log（条目）
解析（文件）
})
})
}

用法：

dropArea.addEventListener（“drop”），函数（事件）{
event.preventDefault（）；
var items=event.dataTransfer.items；
getFilesFromWebkitDataTransferItems（项目）
。然后（文件=>{
...
})
}，假）；

NPM包：

用法示例：
以下是一个完整的示例，介绍如何使用：


var-dropzone=document.getElementById（“dropzone”）；
var listing=document.getElementById（“listing”）；
功能扫描和日志文件（项目、容器）{
var elem=document.createElement（“li”）；
elem.innerHTML=item.name；
子容器（elem）；
if（项目isDirectory）{
var directoryReader=item.createReader（）；
var directoryContainer=document.createElement（“ul”）；
container.appendChild（directoryContainer）；
directoryReader.readEntries（函数（条目）{
entries.forEach（函数（entry）{
扫描和日志文件（条目、目录容器）；
});
});
}
}
dropzone.addEventListener(
“德拉戈弗”，
功能（事件）{
event.preventDefault（）；
},
假的
);
dropzone.addEventListener(
“放下”，
功能（事件）{
var items=event.dataTransfer.items；
event.preventDefault（）；
listing.innerHTML=“”；
对于（变量i=0；i

正文{
字体：14px“Arial”，无衬线；
}
#下降区{
文本对齐：居中；
宽度：300px；
高度：100px；
利润率：10px；
填充：10px；
边框：4px红色虚线；
边界半径：10p