如何通过HTML5文件浏览器获取本地选中文件夹路径（非Node.js方案）

嘿，我来帮你理清这个问题——首先得明确一个核心限制：纯前端环境下（HTML5/JS/jQuery，非Node.js/Electron这类桌面框架），你是没办法直接拿到本地文件夹的绝对路径的，这是浏览器的安全策略刻意限制的，目的是防止恶意网站窃取用户的本地文件系统信息。

不过，你可以通过HTML5的一个非标准但主流支持的特性，让文件选择器支持选文件夹，然后获取文件夹的名称、内部文件的相对层级结构，虽然不是完整绝对路径，但能满足不少场景的需求。

改进后的代码示例 #

// 给文件输入框添加webkitdirectory属性，允许选择文件夹
$('input[type=file]').attr('webkitdirectory', true).change(function () {
  const selectedFiles = this.files;
  if (!selectedFiles.length) return;

  // 从第一个文件的相对路径里提取文件夹名称
  const firstFileRelativePath = selectedFiles[0].webkitRelativePath;
  const folderName = firstFileRelativePath.split('/')[0];
  console.log('选中的文件夹名称:', folderName);

  // 遍历所有文件，输出它们相对于选中文件夹的路径
  console.log('文件夹内文件的相对路径列表:');
  Array.from(selectedFiles).forEach(file => {
    console.log(file.webkitRelativePath);
  });
});

关键细节解释 #

• webkitdirectory属性：这个属性虽然不是W3C标准，但Chrome、Edge、Safari这些主流浏览器都支持，给input[type=file]加上它后，文件选择器就会切换为“选择文件夹”模式。
• webkitRelativePath：每个被选中的文件都会携带这个属性，值是该文件相对于你选中的文件夹的路径（比如my-images/photo1.jpg）。通过这个路径，你能得到文件夹的名称，也能梳理出内部文件的层级，但永远拿不到像/home/username/docs/my-images这样的本地绝对路径——浏览器会把真实路径完全隐藏。

为什么绝对路径拿不到？ #

浏览器的安全模型就是要隔离前端脚本和本地文件系统，防止任意网站获取用户的本地文件路径、目录结构这类敏感信息。这是硬限制，纯前端方案绕不开。

如果你的业务必须要拿到真实的本地绝对路径，那纯前端这条路走不通，只能回到Electron这类桌面应用框架，或者想办法解决CentOS下的GCC编译问题（比如安装对应版本的GCC依赖，或者用预编译好的Electron包，避免自己编译）。

内容的提问来源于stack exchange，提问作者Mohammed Mohideen M Z