HTML5允许拖放上传文件夹或文件夹树？ [英] Does HTML5 allow drag-drop upload of folders or a folder tree?

问题描述

我没有看到任何这样做的例子。这是不允许在api规范？

我正在寻找一个简单的拖放解决方案上传整个照片的文件夹树。

解决方案

现在可以，谢谢Chrome> = 21。

  function traverseFileTree（item，path）{
 path = path || ; 
 if（item.isFile）{
 //获取文件
 item.file（function（file）{
 console.log（File：，path + file.name ）; 
}）; 
} else if（item.isDirectory）{
 //获取文件夹内容
 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 item = event.dataTransfer.items; 
 for（var i = 0; i< items.length; i ++）{
 // webkitGetAsEntry是魔术发生的地方
 var item = items [i ] .webkitGetAsEntry（）; 
 if（item）{
 traverseFileTree（item）; 
} 
} 
}，false）; 
  

更多信息： https://protonet.info/blog/html5-experiment-drag-drop-of-folders/

I haven't seen any examples that do this. Is this not allowed in the api spec?

I am searching for an easy drag-drop solution for uploading an entire folder tree of photos.

解决方案

It's now possible, thanks to 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);

More info: https://protonet.info/blog/html5-experiment-drag-drop-of-folders/

这篇关于HTML5允许拖放上传文件夹或文件夹树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！