在前端开发中，有时我们需要让用户选择一个本地目录，并获取该目录下所有文件的名称，以便进行后续处理（例如，构建播放列表、显示文件预览等）。虽然浏览器出于安全考虑，严格限制了javascript直接访问本地文件系统，但html5提供了一个特殊的<input>元素属性，允许用户选择一个目录，从而间接获取其内容。
实现这一功能的核心在于HTML的<input type="file">元素结合非标准但广泛支持的webkitdirectory（或directory）属性。当这个属性被添加到input元素上时，用户在文件选择对话框中将能够选择一个完整的目录，而非单个文件。浏览器随后会将该目录下所有（或指定类型）的文件作为FileList对象提供给JavaScript。
首先，我们需要在HTML页面中创建一个文件输入元素。为了使其能够选择目录，需要添加type="file"、webkitdirectory和directory属性。multiple属性虽然不是必需的，但通常与目录选择一同使用，以表明可以处理多个文件。
<input type="file" id="videos-input" webkitdirectory directory multiple />
当用户通过上述input元素选择了一个目录后，我们可以监听其change事件来获取并处理文件列表。
const videosInput = document.getElementById("videos-input");
videosInput.addEventListener("change", (e) => {
const files = e.target.files; // 获取 FileList 对象
// 将 FileList 转换为数组，并进行筛选和映射
const fileNames = [...files]
.filter((file) => file.type.startsWith("video/")) // 示例：只筛选视频文件
.map((file) => file.name); // 提取文件名
console.log("获取到的视频文件列表:", fileNames);
console.log("文件数量:", fileNames.length);
// 在这里可以对 fileNames 数组进行进一步操作，
// 例如显示在页面上、发送到后端等。
// do whatever with `fileNames`
});代码解析：
立即学习“Java免费学习笔记（深入）”；
结合HTML和JavaScript，一个完整的实现如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取本地目录文件列表</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#fileListContainer {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
min-height: 100px;
max-height: 300px;
overflow-y: auto;
background-color: #f9f9f9;
}
#fileListContainer ul { list-style-type: none; padding: 0; }
#fileListContainer li { margin-bottom: 5px; }
</style>
</head>
<body>
<h1>选择本地目录以获取文件列表</h1>
<p>请点击下方按钮选择一个本地目录：</p>
<input type="file" id="videos-input" webkitdirectory directory multiple />
<div id="fileListContainer">
<p>已选择的文件列表将显示在此处：</p>
<ul id="fileNamesList">
<!-- 文件名将通过JavaScript动态添加 -->
</ul>
</div>
<script>
const videosInput = document.getElementById("videos-input");
const fileNamesList = document.getElementById("fileNamesList");
videosInput.addEventListener("change", (e) => {
const files = e.target.files;
const fileNames = [...files]
.filter((file) => file.type.startsWith("video/") || file.type === "") // 示例：筛选视频文件，或无类型（如某些txt）
.map((file) => file.name);
// 清空旧列表
fileNamesList.innerHTML = '';
if (fileNames.length > 0) {
fileNames.forEach(name => {
const listItem = document.createElement("li");
listItem.textContent = name;
fileNamesList.appendChild(listItem);
});
console.log("获取到的文件列表:", fileNames);
console.log("文件数量:", fileNames.length);
} else {
const listItem = document.createElement("li");
listItem.textContent = "未找到符合条件的文件或目录为空。";
fileNamesList.appendChild(listItem);
console.log("未找到符合条件的文件。");
}
});
</script>
</body>
</html>浏览器兼容性：
安全性限制：
递归遍历：
性能考量：
文件类型过滤：
通过HTML5的<input type="file" webkitdirectory directory multiple />元素和JavaScript的事件监听与数组处理，我们可以在客户端安全高效地获取用户选择的本地目录中的文件名称列表。掌握这一技术对于需要处理本地文件集合的前端应用（如媒体播放器、文件管理工具等）至关重要。同时，务必注意其浏览器兼容性、安全限制以及性能影响，以提供健壮和用户友好的体验。
以上就是前端获取本地目录文件列表：HTML5 Input与JavaScript实战的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
256
收藏
