如何仅使用 HTML 和 Javascript 在本地网页上显示文件夹列表？ [关闭]

Posted 2023-02-21

【中文标题】如何仅使用 HTML 和 Javascript 在本地网页上显示文件夹列表？ [关闭]

【英文标题】：How can I display a list of folders on a local webpage by only using HTML and Javascript? [closed]

【发布时间】：2018-05-25 13:34:24

【问题描述】：

这是我的第一个问题。

基本上，我要做的是在我的 index.html 页面上显示本地文件夹列表，但是我不确定如何执行此操作。例如，假设我有一个音乐专辑列表：

folder: Good Charlotte
song.mp3
folder: A Day To Remember
song2.mp3
folder: Green Day
song3.mp3

我想做的是在 html 页面上显示每个文件夹，然后还可以单击每个文件夹来访问文件夹中的文件。

非常感谢您提前提供的帮助，如果您需要更多详细信息，请随时告诉我。

【问题讨论】：

你需要服务器端代码。

您好，感谢您的回复。主要问题是我什至不知道该怎么做，我在这里浏览了答案，找不到答案，所以我自己问了一个问题。

您需要使用服务器上可用的任何编程语言来读取目录并输出数据或生成所需的html

如果“本地”是指“托管您网站的网络服务器的本地”，那么您需要学习服务器端编程语言（而且您的问题太广泛了）。如果您的意思是“运行浏览器的计算机本地”，那么您不能这样做。

Node.js（服务器上的 js）使您能够读取目录的内容 nodejs.org/api/fs.html#fs_fs_readdir_path_options_callback

【参考方案1】：

执行此操作的最快和最简单的方法是简单地使用您的网络服务器中列出的默认文件和文件夹。

既然你问这个问题，我怀疑它可能没有启用。以下是如何启用它：

IIS（Windows）：

appcmd 设置配置 /section:directoryBrowse /enabled:true|false

或使用用户界面。见这里：https://technet.microsoft.com/en-us/library/cc731109(v=ws.10).aspx

阿帕奇（Linux）：

Alias /icons/ "/var/www/icons/"

<Directory "/var/www/icons">
    Options Indexes MultiViews
    AllowOverride None
    Require all granted
</Directory>

请看这里：How to enable directory listing in apache web server

样式化输出

我还偶然发现了这个网页，该网页教授如何使用 php 和 CSS 以自己的方式输出。 https://css-tricks.com/snippets/php/display-styled-directory-contents/

  <?php
    // Opens directory
    $myDirectory=opendir(".");

    // Gets each entry
    while($entryName=readdir($myDirectory)) 
      $dirArray[]=$entryName;
    


    // Loops through the array of files
    for($index=0; $index < $indexCount; $index++) 
         // ...