在Firefox中HTML5拖放文件夹检测。 它甚至可能吗？

我有一个放置区域，我想检测被拖动的项目是文件夹还是文件。 在chrome中我通过使用实现了这一点

for (var i = 0; i < nrOfFiles; i++) { var entry = e.originalEvent.dataTransfer.items[i].webkitGetAsEntry(); if (entry.isDirectory) { //folder detection } 

在Firefox中，不可能使用上述解决方案（webkit），在花了很多时间试图解决这个问题后，我想出了以下解决方案（并且失败了）

1. 我检查拖动的项目是否没有类型和大小，如下所示，并且在大多数情况下它按预期工作。 从我所看到的，这是无效的，并没有成功，因为一些文件可能没有文件扩展名所以我尝试使用FileReader API将文件读取为二进制字符串（readAsBinaryString）或readAsArrayBuffer，并在项目为的情况下捕获exception不可读，但永远不会抛出exception。

    var files = e.originalEvent.dataTransfer.files; for (var i = 0; i < nrOfFiles; i++) { if (files[i].size === 0 && files[i].type==="") { try{ var reader = new FileReader(); reader.readAsBinaryString(files[i]); }catch(e){ //folder detection ? } }} 

2. 在下面的解决方案中，我试图使用mozGetDataAt，这是相应的webkitGetAsEntry（???不是100％关于这个，请纠正我，如果我错了）但我得到一个安全例外。

    var entry = e.originalEvent.dataTransfer.mozGetDataAt("application/x-moz-file",i); if (entry.isDirectory) { //not even reaching this statement. idk if isDirectory is applicable to entry //folder detection? } 

例外是：

http：// localhost：8080的权限被拒绝为UnnamedClass类的对象创建包装器

实际上有一种方法可以在Firefox中执行此操作吗？ 如果可能，我不想依赖第三方库或服务器端处理。 任何建议 – 评论将不胜感激。

Answer 1

它可以在Firefox 42及更高版本中使用 （ https://developer.mozilla.org/en-US/Firefox/Releases/42,https：//nightly.mozilla.org/ ）：

https://jsfiddle.net/28g51fa8/3/

例如，通过使用Drang’n’Drop事件： e.dataTransfer.getFilesAndDirectories();

或者使用新的输入对话框，让用户在文件或文件夹上传之间进行选择：

相关Bugzillas：

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310 （为新文件系统API的缩减子集实施MS的提议）

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 （船舶目录拣选和目录拖放）

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924 （支持过滤Directory :: GetFilesAndDirectories）

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21（2016年 11月在Firefox 50发布）

代码部分来自： https ： //jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop （ https://archive.is/ZBEdF ）

到目前为止，不幸的是MS Edge中没有： https ： //dev.modern.ie/platform/status/draganddropdirectories/

Answer 2

您的问题的简单答案是“否”，无法在Firefox中使用拖放function读取文件夹。

似乎没有用于处理文件夹的HTML5标准（尚未）。 Chrome处理文件夹的能力是他们在浏览器中内置的（标准之外）。

目前没有办法使用HTML5 / Javascript在Firefox（或我相信的IE）中进行文件夹拖放。 Mozilla的bugzilla上有一个关于此function的“bug”，它提到W3C目前已经停止为覆盖目录的文件系统API创建标准规范（尽管有这个编辑器的草案 ）。 该Mozilla错误仍处于NEW状态，并且未显示已分配/已获取。

微软有关于该function的非正式边缘文档 ，如果您对在IE中尝试此问题也有疑问，可能会感兴趣。

Answer 3

这是我为解决这个问题所做的工作：

 var files = []; for( var i = 0; i < e.dataTransfer.files.length; i++ ){ var ent = e.dataTransfer.files[i]; if( ent.type ) { // has a mimetype, definitely a file files.push( ent ); } else { // no mimetype: might be an unknown file or a directory, check try { // attempt to access the first few bytes of the file, will throw an exception if a directory new FileReader().readAsBinaryString( ent.slice( 0, 5 ) ); // no exception, a file files.push( ent ); } catch( e ) { // could not access contents, is a directory, skip } } } 

基本上：

• 如果拖放条目具有mime类型，则它是文件
• 否则，尝试阅读条目内容
  • 只读取前5个字节（以避免意外地将大文件加载到内存中）： ent.slice( 0, 5 )
  • 如果读取成功，则它是一个文件
  • 如果读取失败，那么这是一个目录

请享用！