使用JavaScript可以读取目录中的文件吗？

Question

我想读取一个目录，并用这些文件的名称填充列表。

使用JavaScript可以完成这些任务吗？

- aF.

---

取决于。浏览器-JavaScript：真实文件系统：否。虚拟文件系统：是。 - Rob W

虚拟文件系统，据我所知，只是使用localStorage的另一种方式；我想它不能用于执行“ls something”。 - raina77ow

我知道这不是你想要的，但你可以创建一个服务器端脚本并使其读取目录，然后将结果作为 JSON 发送。 - Abdulaziz

如果发布者想要获取他自己目录下的内容，而不是客户端的内容。 - raina77ow

Answer 1

不行，出于安全考虑。

你可以通过调用ActiveX或Flash并让用户同意允许这些插件访问文件系统来实现，但是请不要这样做。

编辑10年后： 不仅请不要这样做，而且现在除了使用没有更新的旧设备外，您无法使用Flash/ActiveX进行此操作。

- Widor

---

Flash和ActiveX在大多数浏览器中已不再受支持，但仍然可以在支持文件系统访问API的浏览器中从目录中读取文件。 - Anderson Green

我使用这个库browser-fs-access成功实现了它的功能。 - gignu

Answer 2

2022年，世界发生了许多变化，现在我们有了一个叫做“文件系统访问API”的东西：（链接）该API允许与用户本地设备或用户可访问的网络文件系统上的文件进行交互。此API的核心功能包括读取文件、写入或保存文件以及访问目录结构。它在Chrome 86中可用（于2020年10月发布）。Safari在2021年底发布的15.2版本中添加了支持。截至撰写本文时，Firefox仍不支持此功能（这是相关讨论）。此外，安全问题并未消失：此API开启了Web一直缺少的潜在功能。尽管如此，在设计API时安全性一直是最重要的考虑因素，并且除非用户明确授权，否则禁止访问文件/目录数据。

此部分已经不再相关（感谢@gignu在评论中提到），出于历史原因，仍然保留在这里。

我想你可以通过使用“webkitdirectory”属性来实现最接近的效果：
HTML

<input type="file" id="file_input" webkitdirectory="" directory="" />
<div id="list_of_files"></div>
...

JS

var $list = $('#list_of_files');
$('#file_input').change(function(event) {
  var listOfFiles = event.target.files;
  for (var i = 0, l = listOfFiles.length; i < l; ++i) {
     $list.append($('<p>'+ listOfFiles[i].name +'</p>'));
  }
});

...如此处所示。但它只在Chrome中有效（建议使用mozdirectory属性也没有帮助）。

- raina77ow

---

不可能吗？我不同意！看看这个库，它正是 OP 所要求的：browser-fs-access - gignu

这个库是对2020年实现的（相对较新的）API的封装，而这篇答案是在2012年编写的。 :) 但你说得对，我更新了我的答案并提到了这个新的API。 - raina77ow

很酷，谢谢你更新它！！ - gignu

Answer 3

您可以尝试使用FileReader对象，但它在浏览器中的支持不是很好。

- antyrat

Answer 4

在Google Chrome中，您可以提示客户选择一个目录，然后使用该目录来列出目录及其子目录中包含的文件。

<input type="file" webkitdirectory onchange="listContents(this.files)">

listContents 将是您的实现。

- Esailija

Answer 5

我不知道你是否在进行安全研究等等...所以除了说“你不应该这样做”之外，对于这个问题的实际答案是，你可以通过利用编写不良的JS代码来读取文件，这就是为什么你应该进行防御性编码。

然后还有这个：http://www.html5rocks.com/en/tutorials/file/dndfiles/

- George Katsanos

Answer 6

是的，这取决于您使用的浏览器。

尽管这不是常见的做法，但您可以使用某些浏览器，例如Chrome（使用webkitRequestFileSystem支持的requestFileSystem）或在Internet Explorer中使用文件系统对象。

- Future2020