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

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

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

现在可以,感谢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); 

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

在这封给HTML 5邮件列表的邮件里,Ian Hickson说:

HTML5现在必须一次上传多个文件。 浏览器可以允许用户一次select多个文件,包括跨多个目录; 这有点超出了规范的范围。

(另请参阅原始functionbuild议 。)因此,假设他认为使用拖放function上传文件夹也超出范围是安全的。 显然这是由浏览器服务于个人文件。

上传文件夹也会遇到一些其他的困难,如Lars Gunther所述 :

这个提案必须有两个支票(如果可以的话):

  1. 最大尺寸,阻止某人上传数百个未压缩原始图像的完整目录…

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

现在你可以通过拖放和input来上传目录。

 <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

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

您可以将文件夹拖放到Firefox中,也可以浏览并select要上传的本地文件夹。 它也支持嵌套在子文件夹中的文件夹。

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

这个函数会给你所有丢弃文件数组的承诺,比如<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); 

HTML5规范并没有说在select上传文件夹时,浏览器应该recursion地上传所有包含的文件。

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

以下内容无法上传,因为它们是文件夹或大小为零字节:未定义

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

只有Chrome支持此function。 它没有任何牵引力,可能会被删除。

参考: https : //developer.mozilla.org/en/docs/Web/API/DirectoryReader#readEntries