React Web应用开发：如何实现目录路径选择器而非目录上传交互

核心认知：浏览器的安全边界限制 #

所有运行在普通浏览器环境下的Web应用，从底层规范上就被禁止直接获取用户本地磁盘的绝对目录路径。如果网页可以随意读取这类信息，很容易被恶意网站收集用户的硬盘目录结构、系统用户名等敏感信息，因此这一层限制没有任何前端技巧可以绕开。
你当前使用的带webkitdirectory属性的文件输入框，原生设计目标是支持批量读取用户选中的目录下的所有文件，从设计之初就不是为“返回纯目录路径”做的，它和桌面软件的目录选择逻辑本质不同。

常见踩坑点 #

你遇到的“弹出文件上传对话框而非目录选择界面”的问题，绝大多数是属性写法不兼容导致的：

• 在JSX等前端框架场景下，直接写webkitdirectory="true"并不会被浏览器正确识别为目录选择配置，会被默认当成普通文件选择组件触发弹窗
• 正确的兼容写法需要给所有浏览器内核的目录属性赋空值，才能正确触发系统原生的目录浏览弹窗

可正常运行的代码示例：

<input
  type="file"
  id="flup"
  webkitdirectory=""
  directory=""
  mozdirectory=""
  onChange={(e) => {
    const selectedFiles = e.target.files
    if (!selectedFiles.length) return
    // 从返回的文件相对路径中，提取用户选中的根目录名称
    const rootDirName = selectedFiles[0].webkitRelativePath.split('/')[0]
    // 可将提取到的目录名填充到自定义的展示输入框中，模拟路径选择的交互效果
    console.log('用户选中的根目录：', rootDirName)
  }}
/>

不同场景的实现路径 #

• 纯浏览器Web应用场景：按上面的正确写法触发的系统弹窗，本身就和桌面软件的目录浏览界面交互逻辑一致，用户确认选择后，我们可以通过返回文件的相对路径属性提取选中的根目录名称，搭配自定义的只读输入框组件模拟路径展示效果。这里需要明确：因为安全限制，这类场景下永远拿不到用户本地的完整绝对路径，所有宣称可以在纯网页环境下拿到真实本地路径的方法都是无效的。
• 可打包为桌面壳的Web应用（如Electron、Tauri场景）：可以直接调用系统原生的目录选择接口，完全不受浏览器安全规则限制，最终的交互效果和原生桌面软件的路径选择体验没有区别。

避坑提示：不要尝试解析浏览器返回的fakepath占位字符串，这类内容是浏览器故意生成的假路径，不具备任何实际使用价值。

内容的提问来源于stack exchange，提问作者Guy Cohen