Javascript FileAPI：迭代目录？

Question

Firefox 3.6 让您将目录拖放到某个元素上（使用拖放 API）并使用 FileAPI 处理这些文件。它如何与目录一起使用？

\n\n

Mac OS X Finder 将某些目录显示为文件（.app、.tmbundle、.abbu、\xe2\x80\xa6）。在大多数情况下，这很棒。在通过 File- 和 DND-API 与浏览器交互的情况下，情况并非如此。最终用户无法区分真实文件和类似 my-addressbook-backup.abbu 的文件。

\n\n

因此，Javascript UI 必须能够识别目录结构。如果它无法遍历该结构，则必须相应地通知用户。

\n\n

关于如何实现其中任何一个的想法？

\n\n

编辑：

\n\n

我可以看到允许 JS 遍历目录时出现的（潜在的）问题。我本身并不要求进行目录遍历（尽管我不会要求能够这样做）。我说的是 Foo.app 被视为一个文件（如用户通过 Finder.app 看到的那样），但实际上是一个目录（如在 Terminal.app 中查看它时看到的那样）。

\n\n

文件 API 目前不提供任何遍历机制。因此，addressbook-dump.abbu 中更深层次的嵌套文件将无法访问。有什么想法可以让这一切成为可能吗？

\n\n

否则我必须告诉我的 OSX 用户将他们的地址簿文件存档（例如 ZIP）并“上传”该 zip（我实际上可以在 JS 中读取）。尽管这是一种解决方法，而不是解决方案。

\n

Answer 1

从理论上讲，您所描述的内容可以通过FileReaderAPI 实现。例如， 此演示读取 .zip 文件（点击加载 photos.zip），解压其内容，并向用户显示其中包含的图片列表。

对于一般文件夹拖放，Chrome/WebKit 有两个 bug：1、2。当这些问题得到解决后，您将能够将文件夹从操作系统拖动到<input type="file" webkitdirectory>并遍历其所有层次结构。要查看webkitdirectory实际效果，请在 Chrome 中查看此演示。