下面是js+FSO遍历文件夹下文件并显示的完整攻略：
步骤一：创建文件夹
首先我们需要创建一个文件夹来存放我们的代码和测试文件，创建一个名为 "file-explorer" 的文件夹。
步骤二：创建HTML和CSS文件
在 "file-explorer" 文件夹中，我们创建一个名为 "index.html" 的文件，同时我们也需要创建一个样式文件 "style.css"，将两者链接起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Explorer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>File Explorer</h1>
<ul id="fileList">
</ul>
<script src="app.js"></script>
</body>
</html>
h1 {
text-align: center;
}
li {
list-style-type: none;
}
步骤三：创建JS文件
在 "file-explorer" 文件夹中，创建一个名为 "app.js" 的文件。
1. 获取文件夹路径
首先，我们需要从用户输入中得到要遍历的文件夹路径，我们可以在"index.html"添加一个简单的输入框和一个显示文件列表的无序列表：
<label for="folderInput">Enter folder path:</label>
<input id="folderInput" type="text">
<ul id="fileList">
</ul>
我们可以在"app.js"中编写代码，使用 getElementById () 方法来获取输入框中的文本，然后存储到 folderPath 变量中:
const folderInput = document.getElementById("folderInput");
const folderPath = folderInput.value;
2. 读取文件夹内容
我们需要使用 ActiveXObject 创建一个 FSO（FileSystem Object）对象来访问文件系统。然后使用 FSO 的创建枚举器方法，该方法返回一个能够遍历文件夹下所有文件的 Enumerator 对象。
const fso = new ActiveXObject("Scripting.FileSystemObject");
const folder = fso.GetFolder(folderPath);
const filesEnumerator = new Enumerator(folder.files);
3. 显示文件夹内容
接下来我们需要将文件列表显示在无序列表中，我们需要循环遍历 Enumerator 对象中的每一个文件，将文件名添加到无序列表中。
for (; !filesEnumerator.atEnd(); filesEnumerator.moveNext()) {
const fileName = filesEnumerator.item().Name;
const listItem = document.createElement('li');
listItem.textContent = fileName;
document.getElementById('fileList').appendChild(listItem);
}
测试示例
- 在 "file-explorer" 文件夹中创建一个名为 "test" 的文件夹，并在里面添加一些测试文件，包括文本文件、图像文件和 PDF 文件，例如 "test.txt"、"test.jpg" 和 "test.pdf"。
file-explorer/
├── index.html
├── style.css
├── app.js
└── test/
├── test.txt
├── test.jpg
└── test.pdf
- 在浏览器中打开 "index.html" 文件，输入 "test" 文件夹的路径，并点击显示文件按钮。可以看到测试文件夹中的所有文件名都被显示在无序列表中。
以上便是使用js+FSO遍历文件夹下文件并显示的完整攻略，希望能够帮助到您。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js+FSO遍历文件夹下文件并显示 - Python技术站
微信扫一扫 
支付宝扫一扫 