如何用 JavaScript 获取文件夹下的所有文件名
在开发过程中，有时我们需要获取某个文件夹下的所有文件名。这在进行文件处理、数据整理和上传等操作时非常有用。本文将教会你如何使用 JavaScript 获取文件夹中的所有文件名，主要分为几个步骤。
流程概述
下面是获取文件夹下所有文件名的基本步骤：
| 步骤 | 操作 | 说明 |
|---|---|---|
| 1 | 创建 HTML 文件 | 创建一个简单的网页，用于运行 JavaScript 代码。 |
| 2 | 使用 File API | 使用浏览器的 File API 让用户选择文件夹。 |
| 3 | 文件夹读取 | 获取所选文件夹中的所有文件，并输出文件名。 |
| 4 | 显示文件名 | 将文件名显示在网页中。 |
接下来，我们逐步实现这些步骤。
步骤详解
步骤 1：创建 HTML 文件
首先，我们需要创建一个简单的 HTML 页面，包含一个按钮，让用户可以选择文件夹。以下是示例代码：
<!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="folderInput" webkitdirectory directory multiple>
<div id="fileList"></div>
<script src="script.js"></script>
</body>
</html>
input type="file"：创建文件输入控件。webkitdirectory：使得控件能够选择文件夹而不仅仅是单个文件。directory multiple：允许选择文件夹中的多个文件。
步骤 2：使用 File API
为了让我们能够获取文件夹中所有的文件名，接下来我们需要编写 JavaScript 代码。这段代码将会处理用户选择的文件夹。
在相同的项目目录下，创建一个名为 script.js 的文件，并输入以下代码：
document.getElementById('folderInput').addEventListener('change', function(event) {
const files = Array.from(event.target.files); // 获取选中的文件列表
const fileNames = files.map(file => file.name); // 获取文件名
displayFileNames(fileNames); // 调用显示函数
});
addEventListener('change')：监听文件输入控件的 change 事件，当用户选择文件夹后，会触发该事件。event.target.files：访问用户选择的文件列表。Array.from()：将文件列表转换为数组，以便进行操作。map(file => file.name)：遍历每个文件，获取其name属性，形成一个新的数组。
步骤 3：文件夹读取
我们需要一个函数来显示这些文件名。我们可以在 script.js 中加入以下代码：
function displayFileNames(fileNames) {
const fileList = document.getElementById('fileList'); // 获取显示文件名的容器
fileList.innerHTML = ''; // 清空之前的内容
fileNames.forEach(name => {
const listItem = document.createElement('div'); // 创建一个新的 div 元素
listItem.textContent = name; // 设置该 div 的文本内容为文件名
fileList.appendChild(listItem); // 添加到文件列表中
});
}
document.getElementById('fileList')：获取用以显示文件名的 DOM 元素。innerHTML = ''：清空之前的内容，以便更新。createElement('div')：为每个文件名创建一个新的 div 元素。appendChild(listItem)：将新创建的元素添加到文件列表中。
步骤 4：显示文件名
上述代码已经实现了从选择的文件夹中获取文件名并在网页上显示的望。如果你按照上述步骤创建了一个简单的 HTML 和 JavaScript 文件，打开 HTML 文件后，点击 "选择文件夹" 按钮，选择一个文件夹，你将能在网页上看到该文件夹下的所有文件名显示出来。
旅行图：步骤流程示意
journey
title JavaScript 获取文件夹下的所有文件名
section 创建 HTML 文件
操作用户选择文件夹: 5: 用户
section 使用 File API
获取文件列表: 4: 系统
section 文件夹读取
获取文件名并显示: 4: 系统
结尾
经过以上步骤，你已经掌握如何用 JavaScript 获取文件夹中所有文件名的基本方法了。这种方式不仅便捷易用，还可以扩展用于多种不同的场景，如文件上传、数据处理等。希望本文能够对你在学习 JavaScript 的过程中提供帮助。记得多加练习，加深理解，在实际项目中灵活运用所学知识！如果你有任何疑问或需要进一步的指导，欢迎随时问我！
