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

Question

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

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

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); 

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

Answer 2

在this message到HTML 5的邮件列表伊恩·希克森说：

HTML5现在已经在 一次上传多个文件。浏览器可以允许用户 一次选择多个文件，包括跨多个目录的 ;这是一个 位超出了规范的范围。

（另见原feature proposal。） 所以是安全的假设，他认为通过上传拖和下降也超出范围的文件夹。显然，这取决于浏览器为单个文件提供服务。

上传文件夹，也有一些其他的困难，如Lars Gunther描述：

这[...]建议必须有两个 检查（如果可行的话）：

1. 最大尺寸，阻止某人上传几张完整目录 上百张未压缩的原始图片...

2. 即使省略了accept属性，也进行过滤。 Mac OS元数据 和Windows缩略图等应省略 。所有隐藏的文件和 目录应该默认排除为 。

Answer 3

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

实际上，在Chrome/Chromium中，您可以上传文件夹，但是当您这样做时，它只会上传一个无意义的4KB文件，它代表目录。像Alfresco一些服务器端的应用程序可以检测到这一点，并警告说，文件夹不能上传用户：

Answer 4

现在你可以上传拖放和输入目录。

<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> 

资源：

http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available

Answer 5

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

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

编号：https://developer.mozilla.org/en/docs/Web/API/DirectoryReader#readEntries

Answer 6

火狐现在支持文件夹上传，2016年11月15日，在v50.0：https://developer.mozilla.org/en-US/Firefox/Releases/50#Files_and_directories

你可以拖放文件夹到Firefox或者您可以浏览并选择本地要上传的文件夹。它还支持嵌套在子文件夹中的文件夹。

这意味着您现在可以使用Chrome，Firefox，Edge或Opera上传文件夹。目前您无法使用Safari或Internet Explorer。

Answer 7

此功能将给予您所有的数组承诺丢弃的文件，像<input type="file"/>.files：

function getFilesWebkitDataTransferItems(dataTransferItems) { 
    function traverseFileTreePromise(item, path='') { 
    return new Promise(resolve => { 
     if (item.isFile) { 
     item.file(file => { 
      file.filepath = path + file.name //save full path 
      files.push(file) 
      resolve(file) 
     }) 
     } else if (item.isDirectory) { 
     let dirReader = item.createReader() 
     dirReader.readEntries(entries => { 
      let entriesPromises = [] 
      for (let entr of entries) 
      entriesPromises.push(traverseFileTreePromise(entr, path + item.name + "/")) 
      resolve(Promise.all(entriesPromises)) 
     }) 
     } 
    }) 
    } 

    let files = [] 
    return new Promise((resolve, reject) => { 
    let entriesPromises = [] 
    for (let it of dataTransferItems) 
     entriesPromises.push(traverseFileTreePromise(it.webkitGetAsEntry())) 
    Promise.all(entriesPromises) 
     .then(entries => { 
     //console.log(entries) 
     resolve(files) 
     }) 
    }) 
} 

用法：

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

    var items = event.dataTransfer.items; 
    getFilesFromWebkitDataTransferItems(items) 
    .then(files => { 
     ... 
    }) 
}, false);