是否可以使用javascript從目錄中讀取文件？

Question

我想讀取一個目錄並用這些文件的名稱填寫一個列表。

是否可以使用 javascript 執行此任務？

Answer 1

不，出於安全原因。

您可以通過調用 ActiveX 或 Flash 並讓用戶同意允許從這些插件訪問文件系統來做到這一點，但是 - 請不要。

10 年后編輯：不僅請不要這樣做，而且現在除了使用沒有更新的舊設備之外 - 您不能使用 Flash/ActiveX 執行此操作。

Answer 2

現在是 2022 年，世界內外發生了很多變化，你瞧，現在我們有了一個叫做File System Access 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屬性沒有幫助）。

Answer 3

您可以嘗試使用FileReader對象，但瀏覽器對它的支持很差。

Answer 4

在谷歌瀏覽器中，您可能會提示客戶端選擇一個目錄，然后使用它來列出目錄及其子目錄中包含的文件：

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

listContents將是您的實現。

Answer 5

我不知道你是否在做安全研究等等。所以除了說“你不應該這樣做”之外，問題的實際答案是，你實際上可以利用寫得不好的 JS 代碼來閱讀文件，這就是為什么你應該編碼......防御性。

然后是這個： http ://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 6

是的，取決於您使用的瀏覽器。

盡管這不是一種常見的做法，但您可以使用某些瀏覽器，例如 Chrome（使用 webkitRequestFileSystem 支持的 requestFileSystem）或在 Internet Explorer 中使用文件系統對象。