创建一个独立的 html 页面，显示文件夹中所有文件的内容

Question

我有以下文件夹结构：

index.html
my_folder
    |-- file1.txt
    |-- file2.txt
    |-- another_file.txt
    |-- ...

在 index.html 中，我想显示文件夹 my_folder 中每个文件的第一行，并将其列在 html table.[=14= 中]

有没有简单的方法来做到这一点？它应该适用于所有访问该文件夹的计算机，这些计算机没有 php 或任何运行.

非常感谢！

Answer 1

没有。

本地网页无法读取它们所在文件夹的目录结构。（想象一下如果这可能会带来安全隐患，并且您双击了电子邮件附件中的 HTML 文件）。

如果您是运行 HTTP 服务器，那么您可以使用服务器端代码（甚至是大多数服务器自动生成的基本目录列表页面）以 JavaScript 可访问的格式列出文件].

Answer 2

出于安全原因，您不能在 HTML 或 JavaScript 中执行此操作

但是您可以在浏览器中键入此内容以查看本地目录
"file:///C:/users//desktop/"

Answer 3

如上所说，我原本想要的显然是不可能的。总结一下，这是我规避问题的方法：

关键是将文件夹结构更改为确定性的结构。我选择了：

index.html
    |-- 0/
        |-- info.txt
        |-- ...
    |-- 1/
        |-- info.txt
        |-- ...
    |-- 2/
        |-- info.txt
        |-- ...
    |-- ...

然后，我可以使用 XMLHttpRequest:

读取我的文件

<script>
var rawFile = [];
// 1000 is much larger than the total number of files
for(i = 0; i < 1000; i++) {
    var folderPath = "./" + i;
    rawFile[i] = new XMLHttpRequest();
    rawFile[i].open("GET", folderPath + "/info.txt", false);
    rawFile[i].onreadystatechange = function ()
    {
        if(rawFile[i].readyState === 4)
        {
            if(rawFile[i].status === 200 || rawFile[i].status == 0)
            {
                var data = rawFile[i].responseText;
                // do some formatting
                $("table").append(data);
            }
        }
    }
    rawFile[i].send(null);
}
</script>

可能不是最简洁的方法，而且绝对不灵活，但它确实有效。

创建一个独立的 html 页面，显示文件夹中所有文件的内容

Create a standalone html page which shows the contents of all files within a folder

html

file-io