如何用 JavaScript 获取文件夹中的文件名
在 Web 开发中，有时候我们可能需要获取特定目录中的文件名，但这种操作通常是被限制的，因为 JavaScript 只能在客户端环境中运行，且出于安全考虑无法直接访问本地文件系统。然而，配合 HTML 的 <input> 标签或 Node.js 环境，我们能实现这样的功能。本文将重点讲解如何通过两种方式获取文件夹中的文件名。
流程概述
为了让小白们更清晰地理解整个过程，下面是实现的基本步骤：
| 步骤 | 描述 |
|---|---|
| 1 | 使用 HTML 创建文件输入元素 |
| 2 | 使用 JavaScript 获取输入的文件信息 |
| 3 | 提取文件名并显示 |
| 4 | 针对 Node.js 环境的实现方法 |
步骤详解
步骤 1：创建 HTML 文件输入元素
首先，我们需要创建一个 HTML 文件输入元素，以便用户可以选择文件夹中的文件。这里我们使用 <input type="file" webkitdirectory> 属性来允许用户选择整个文件夹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取文件夹中的文件名</title>
</head>
<body>
<input type="file" id="fileInput" webkitdirectory multiple />
<ul id="fileList"></ul>
<script src="script.js"></script>
</body>
</html>
说明：
<input type="file">: 创建一个文件输入框，用于选择文件。webkitdirectory: 允许选择目录（仅在某些浏览器中有效）。multiple: 允许选择多个文件。<ul id="fileList">: 用于显示文件名的列表。
步骤 2：获取输入文件的信息
接下来，我们在 script.js 文件中编写代码，使用 JavaScript 获取用户选中的文件的信息。
document.getElementById('fileInput').addEventListener('change', function(event) {
const files = event.target.files; // 获取用户选择的文件列表
displayFileNames(files); // 调用函数以显示文件名
});
说明：
addEventListener('change', function(event) {...}): 监听输入框的变化事件。event.target.files: 获取选择的文件列表。
步骤 3：显示文件名
接下来，创建一个函数来提取文件名并将其展示在页面上。
function displayFileNames(files) {
const fileList = document.getElementById('fileList'); // 获取显示文件名的列表
fileList.innerHTML = ''; // 清空之前的文件名内容
for (let i = 0; i < files.length; i++) {
const fileItem = document.createElement('li'); // 创建<li>元素
fileItem.textContent = files[i].name; // 设置文件名
fileList.appendChild(fileItem); // 将文件名添加到列表中
}
}
说明：
fileList.innerHTML = '';: 清空已有的文件名显示，以便显示新的文件名。createElement('li'): 创建新的列表项用于显示文件名。textContent: 设置创建的列表项的文本内容为文件名。
步骤 4：Node.js 环境获取文件名
如果你是在 Node.js 环境下工作，可以使用 fs 模块来读取文件夹中的文件名。以下是实现的示例代码：
const fs = require('fs');
const path = require('path');
const folderPath = './path/to/your/directory'; // 替换为你的目录路径
fs.readdir(folderPath, (err, files) => {
if (err) {
return console.error('无法读取文件夹:', err);
}
files.forEach(file => {
console.log(file); // 打印每个文件名
});
});
说明：
require('fs'): 引入文件系统模块。fs.readdir: 读取指定目录的内容。console.log(file): 输出文件名。
代码结构类图
为了更好地理解代码的结构，下面是相应的类图：
classDiagram
class HTMLInputElement {
+change(event)
}
class File {
+name
}
class FileList {
+files
}
class Node {
+readdir(path, callback)
}
HTMLInputElement --> FileList : 选择文件
FileList --> File : 包含文件
Node --> FileList : 读取文件夹
结论
通过以上步骤，你已经掌握了如何使用 JavaScript 获取文件夹中的文件名。首先，我们创建了用于选择文件的输入框，并通过事件监听获取用户选择的文件。随后，我们展示了如何使用 Node.js 在服务器端读取文件夹内容。
如果你在实际开发中还有其他问题，不妨随时尝试查阅相关文档或询问经验丰富的开发者。希望经过这篇文章的学习，你能对 JavaScript 与文件处理有更深入的理解。祝你在编程的旅途中愉快而顺利！
