将本地目录的文件名转换为 JavaScript 数组

本文介绍了如何使用 JavaScript 将本地目录中的文件名提取并存储到数组中。通过使用 HTML 的 <input type="file"> 元素并结合 webkitdirectory 和 directory 属性，允许用户选择一个目录。然后，通过监听 change 事件，可以访问用户选择的文件列表，并使用 JavaScript 将文件名提取到数组中。本文提供详细的代码示例和解释，帮助开发者轻松实现此功能。

从本地目录获取文件名数组

在 Web 开发中，有时需要访问用户本地目录中的文件，并将文件名存储到 JavaScript 数组中。虽然 JavaScript 本身无法直接访问本地文件系统，但可以通过 HTML 的 <input type="file"> 元素和一些技巧来实现这个目标。

HTML 结构

首先，需要在 HTML 中添加一个 <input type="file"> 元素，并设置 webkitdirectory 和 directory 属性。这两个属性允许用户选择一个目录，而不是单个文件。multiple 属性允许用户选择多个文件或目录。

立即学习“Java免费学习笔记（深入）”；

<input type="file" id="videos-input" webkitdirectory directory multiple />

JavaScript 代码

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

接下来，使用 JavaScript 监听 <input> 元素的 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`
});

代码解释

1. videosInput.files: files 属性返回一个 FileList 对象，包含了用户选择的所有文件和目录。
2. [...files]: 使用扩展运算符将 FileList 对象转换为一个真正的数组，方便后续操作。
3. .filter((file) => file.type === "video/mp4"): 使用 filter 方法过滤文件，只保留 type 属性为 video/mp4 的文件，也就是 MP4 视频文件。你可以根据实际需求修改过滤条件。
4. .map((file) => file.name): 使用 map 方法将每个文件对象转换为文件名字符串。
5. console.log(fileNames, fileNames.length): 将文件名数组和数组长度打印到控制台，方便调试。
6. // do whatever with \fileNames``: 在这里可以对 fileNames 数组进行任何需要的操作，例如将文件名显示在页面上，或者将文件名发送到服务器。

注意事项

• 浏览器兼容性: webkitdirectory 和 directory 属性可能不是所有浏览器都支持。建议在使用前进行浏览器兼容性检查。
• 安全性: 由于 JavaScript 无法直接访问本地文件系统，因此这种方法依赖于用户手动选择目录。需要注意用户选择的目录是否安全，避免恶意用户选择包含敏感信息的目录。
• 文件类型过滤: 示例代码中使用了 file.type === "video/mp4" 来过滤文件类型。请根据实际需求修改过滤条件，以确保只获取需要的文件。
• 性能: 如果用户选择的目录包含大量文件，可能会影响性能。建议在处理大量文件时，使用异步操作或者分批处理，以避免阻塞主线程。
• 递归遍历: 上述代码不会递归遍历子文件夹。如果你需要递归遍历子文件夹，需要编写额外的代码来实现。

总结

通过使用 HTML 的 <input type="file"> 元素和 JavaScript，可以方便地将本地目录中的文件名提取到数组中。这种方法在 Web 开发中非常有用，例如可以用于创建视频播放列表、图片库等应用。请注意浏览器兼容性、安全性以及性能问题，并根据实际需求进行适当的调整。

以上就是将本地目录的文件名转换为 JavaScript 数组的详细内容，更多请关注php中文网其它相关文章！