JavaScript 浏览文件夹路径限制

在前端开发中，有时需要让用户通过浏览器选择一个文件夹路径，然而 JavaScript 并不直接提供这样的功能。所以，我们需要使用一些技巧以模拟实现此功能。

限制选择文件夹

在文件选择器的 input 元素中，可以通过设置 webkitdirectory 属性来限制用户只能选择文件夹。例如：

<input type="file" webkitdirectory />

这样用户只能选择文件夹，而不能选择单个文件。然而，用户可以选择任意文件夹，而我们可能需要限制用户只能选择某些文件夹。

限制选择指定路径

为了限制用户只能选择指定路径的文件夹，我们需要对用户选择的文件夹路径进行验证。例如：

<input type="file" id="dir-select" webkitdirectory />

<script>
const dirSelect = document.getElementById("dir-select");

dirSelect.addEventListener("change", () => {
  const selectedPath = dirSelect.files[0].path;
  if (!selectedPath.startsWith("/path/to/allowed/folder")) {
    alert("请选择指定文件夹路径");
    dirSelect.value = "";
  }
});
</script>

这样，当用户选择的文件夹路径不是 /path/to/allowed/folder 的子路径时，会弹出提示并清空选择的文件夹路径。

无法在所有浏览器中使用

需要注意的是，webkitdirectory 是针对谷歌浏览器的，不一定在其他浏览器中得到支持。在其他浏览器中，可以使用第三方库如 filer.js 来实现选择文件夹的功能。