检测javascript FileList对象中的文件夹/目录

Question

我最近为Moodle贡献了一些代码，该代码使用HTML5的某些功能允许通过从桌面拖放来以表格形式上传文件（代码的核心部分在这里：https://github.com/moodle/moodle/blob/master/lib/form/dndupload.js供参考）。

这很好，除了用户拖动 文件夹/目录而不是真实文件时除外。垃圾然后上传到服务器，但文件名与文件夹匹配。

我正在寻找的是一种简单可靠的方法来<在FileList对象中是否存在文件夹，因此我可以跳过它（并可能返回友好的错误消息）。我浏览了有关MDN的文档以及更常规的网络搜索，但没有发现任何内容。我还浏览了Chrome开发人员工具中的数据，似乎文件夹的File对象的

'type'

始终设置为“”。但是，我不太确定这是最可靠的跨浏览器检测方法。有人有更好的建议吗？

我最近为Moodle贡献了一些代码，该代码使用HTML5的某些功能，允许通过从桌面拖放来以表格形式上传文件（代码的核心部分是...

Answer 1

您不能依靠file.type。没有扩展名的文件的类型为""。保存扩展名为.jpg的文本文件并将其加载到文件控件中，其类型将显示为image/jpeg。并且，名为“ someFolder.jpg”的文件夹的类型也为image/jpeg。

Answer 2

我也遇到了这个问题，下面是我的解决方案。基本上，我采取了两种方法：

Answer 3

我建议在FileReader.readAsBinaryString对象上调用File。在Firefox中，当File为Directory时，将引发异常。仅当File符合gilly3提出的条件时，我才这样做。

Answer 4

另一个注意事项是，对于任何扩展名未知的文件，其类型均为“”。尝试上传一个名为test.blah的文件，该类型将为空。 AND ...尝试拖放一个名为test.jpg的文件夹-类型将设置为“ image / jpeg”。要100％正确，您不能仅依赖类型（或者完全依赖类型）。

Answer 5

仅供参考，这篇文章将告诉您如何在Chrome中使用dataTransfer API来检测文件类型：http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available

Answer 6

最佳选择是在FileReader实例上同时使用'progress'和'load'事件。