本文介绍了如何使用 JavaScript 将本地目录中的文件名提取并存储到数组中。通过使用 HTML 的 元素并结合 webkitdirectory 和 directory 属性，允许用户选择一个目录。然后，通过监听 change 事件，可以访问用户选择的文件列表，并使用 JavaScript 将文件名提取到数组中。本文提供详细的代码示例和解释，帮助开发者轻松实现此功能。
从本地目录获取文件名数组
在 Web 开发中，有时需要访问用户本地目录中的文件，并将文件名存储到 JavaScript 数组中。虽然 JavaScript 本身无法直接访问本地文件系统，但可以通过 HTML 的 元素和一些技巧来实现这个目标。
HTML 结构
首先，需要在 HTML 中添加一个 元素，并设置 webkitdirectory 和 directory 属性。这两个属性允许用户选择一个目录，而不是单个文件。multiple 属性允许用户选择多个文件或目录。
立即学习“Java免费学习笔记（深入）”；
JavaScript 代码
MMM金融互助系统源码是以thinkphp为核心进行开发的3m金融互助平台。程序安装说明：1.恢复数据：将“数据备份”文件夹中的 urkeji.sql 文件请采用phpMyAdmin进行导入； 2.配置Sql数据库信息，文件路径：根目录下 config.php3.后台管理地址：http://域名/admin.php 用户名：100000 密码：admin1
接下来，使用 JavaScript 监听 元素的 change 事件。当用户选择目录后，change 事件会被触发。在事件处理函数中，可以访问 files 属性，它是一个 FileList 对象，包含了用户选择的所有文件和目录。
const videosInput = document.getElementById("videos-input");
videosInput.addEventListener("change", (e) => {
const files = videosInput.files;
const fileNames = [...files].filter((file) => file.type === "video/mp4").map((file) => file.name);
console.log(fileNames, fileNames.length);
// do whatever with `fileNames`
});代码解释
- videosInput.files: files 属性返回一个 FileList 对象，包含了用户选择的所有文件和目录。
- [...files]: 使用扩展运算符将 FileList 对象转换为一个真正的数组，方便后续操作。
- .filter((file) => file.type === "video/mp4"): 使用 filter 方法过滤文件，只保留 type 属性为 video/mp4 的文件，也就是 MP4 视频文件。你可以根据实际需求修改过滤条件。
- .map((file) => file.name): 使用 map 方法将每个文件对象转换为文件名字符串。
- console.log(fileNames, fileNames.length): 将文件名数组和数组长度打印到控制台，方便调试。
- // do whatever with \fileNames``: 在这里可以对 fileNames 数组进行任何需要的操作，例如将文件名显示在页面上，或者将文件名发送到服务器。
注意事项
- 浏览器兼容性: webkitdirectory 和 directory 属性可能不是所有浏览器都支持。建议在使用前进行浏览器兼容性检查。
- 安全性: 由于 JavaScript 无法直接访问本地文件系统，因此这种方法依赖于用户手动选择目录。需要注意用户选择的目录是否安全，避免恶意用户选择包含敏感信息的目录。
- 文件类型过滤: 示例代码中使用了 file.type === "video/mp4" 来过滤文件类型。请根据实际需求修改过滤条件，以确保只获取需要的文件。
- 性能: 如果用户选择的目录包含大量文件，可能会影响性能。建议在处理大量文件时，使用异步操作或者分批处理，以避免阻塞主线程。
- 递归遍历: 上述代码不会递归遍历子文件夹。如果你需要递归遍历子文件夹，需要编写额外的代码来实现。
总结
通过使用 HTML 的 元素和 JavaScript，可以方便地将本地目录中的文件名提取到数组中。这种方法在 Web 开发中非常有用，例如可以用于创建视频播放列表、图片库等应用。请注意浏览器兼容性、安全性以及性能问题，并根据实际需求进行适当的调整。
