在前端开发中，有时我们需要让用户选择一个本地目录，并获取该目录下所有文件的名称，以便进行后续处理（例如，构建播放列表、显示文件预览等）。虽然浏览器出于安全考虑，严格限制了javascript直接访问本地文件系统，但html5提供了一个特殊的元素属性，允许用户选择一个目录，从而间接获取其内容。
核心原理：webkitdirectory 属性
实现这一功能的核心在于HTML的元素结合非标准但广泛支持的webkitdirectory（或directory）属性。当这个属性被添加到input元素上时，用户在文件选择对话框中将能够选择一个完整的目录，而非单个文件。浏览器随后会将该目录下所有（或指定类型）的文件作为FileList对象提供给JavaScript。
HTML 结构
首先，我们需要在HTML页面中创建一个文件输入元素。为了使其能够选择目录，需要添加type="file"、webkitdirectory和directory属性。multiple属性虽然不是必需的，但通常与目录选择一同使用，以表明可以处理多个文件。
- type="file": 指定这是一个文件上传输入框。
- id="videos-input": 为JavaScript操作提供一个唯一的标识符。
- webkitdirectory: 这是最初由WebKit引擎引入的属性，允许用户选择目录。
- directory: 这是W3C标准草案中提议的等效属性，旨在提高兼容性。建议两者都使用以获得最佳兼容性。
- multiple: 允许用户选择多个文件（当选择目录时，它会包含目录下的所有文件）。
JavaScript 逻辑：处理文件列表
当用户通过上述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免费学习笔记（深入）”；
- videosInput.addEventListener("change", ...): 监听input元素的选择变化事件。当用户选择目录并关闭对话框后，此事件会触发。
- e.target.files: 这是核心。它返回一个FileList对象，其中包含了用户选择目录下的所有文件。FileList是一个类数组对象，包含了File对象的实例。每个File对象都包含文件的元数据，如name（文件名）、size（文件大小）、type（MIME类型）、lastModified（最后修改时间）等。
- [...files]: 使用扩展运算符将FileList对象转换为一个标准的JavaScript数组。这样做可以方便地使用数组的各种方法，如filter和map。
- .filter((file) => file.type.startsWith("video/")): 这一步用于根据文件类型进行筛选。在本例中，我们筛选出所有MIME类型以"video/"开头的视频文件。你可以根据需求修改此条件，例如file.type === "image/jpeg"来筛选JPEG图片，或者完全移除filter来获取所有文件。
- .map((file) => file.name): 筛选完成后，使用map方法遍历剩余的File对象，并提取每个文件的name属性，最终生成一个只包含文件名的字符串数组。
完整示例代码
结合HTML和JavaScript，一个完整的实现如下：
获取本地目录文件列表
选择本地目录以获取文件列表
请点击下方按钮选择一个本地目录：
注意事项与限制
-
浏览器兼容性：
- webkitdirectory属性在Chrome、Edge、Opera、Safari以及Firefox等主流现代浏览器中均有良好支持。
- directory属性是W3C标准草案的一部分，但目前并非所有浏览器都完全支持，因此同时使用两者是最佳实践。
- 在一些旧版或非主流浏览器中，此功能可能无法正常工作，input元素会退化为只能选择单个文件。
-
安全性限制：
- 出于安全考虑，JavaScript无法直接指定或访问本地文件系统的任意路径。用户必须主动通过文件选择对话框来选择目录。
- 你只能获取文件的元数据（如文件名、大小、类型），无法直接读取文件内容（除非用户通过FileReader API进一步操作）。
-
递归遍历：
- webkitdirectory属性默认会递归遍历用户选择目录下的所有子目录，并将所有文件包含在FileList中。这意味着如果你选择了一个包含多层嵌套文件夹的目录，FileList会包含所有层级的文件。
- 如果只希望获取顶层目录的文件，而忽略子目录，JavaScript本身无法直接控制input元素的这一行为。你需要通过JavaScript在获取FileList后，根据File.webkitRelativePath属性来手动筛选掉子目录中的文件。例如，file.webkitRelativePath会显示文件相对于所选目录的路径（如subfolder/VideoC.mp4）。
-
性能考量：
- 当用户选择一个包含大量文件（例如数万个）的目录时，浏览器可能需要一些时间来构建FileList对象。
- 虽然FileList通常只包含文件的元数据，不会将所有文件内容加载到内存中，但处理庞大的元数据列表仍可能影响页面响应速度。在处理大型目录时，考虑添加加载指示器，并优化JavaScript处理逻辑，例如分批处理或使用Web Workers。
-
文件类型过滤：
- filter方法是客户端筛选文件类型的有效方式。file.type属性返回文件的MIME类型（例如"image/jpeg"、"video/mp4"）。
- 需要注意的是，file.type是根据文件扩展名或操作系统/浏览器识别的结果，并非总是百分之百准确，尤其对于没有扩展名或自定义类型的文件。
总结
通过HTML5的元素和JavaScript的事件监听与数组处理，我们可以在客户端安全高效地获取用户选择的本地目录中的文件名称列表。掌握这一技术对于需要处理本地文件集合的前端应用（如媒体播放器、文件管理工具等）至关重要。同时，务必注意其浏览器兼容性、安全限制以及性能影响，以提供健壮和用户友好的体验。
