如何用HTML和JavaScript实现文件夹选择并在输入框显示路径

方案一：基于webkitdirectory的兼容实现（支持多数浏览器） #

你用的<input type="file" webkitdirectory>能实现文件夹选择，但浏览器出于安全限制不会暴露完整本地真实路径，不过可以通过它获取文件夹名称或相对路径，再绑定自定义按钮优化交互：

HTML代码 #

<button id="selectFolderBtn">选择文件夹</button>
<input type="text" id="folderPathInput" readonly placeholder="选中的文件夹路径">
<!-- 隐藏原生文件选择控件 -->
<input type="file" id="folderSelector" webkitdirectory directory style="display: none;">

JavaScript代码 #

const selectBtn = document.getElementById('selectFolderBtn');
const folderSelector = document.getElementById('folderSelector');
const pathInput = document.getElementById('folderPathInput');

// 点击自定义按钮触发原生控件
selectBtn.addEventListener('click', () => {
  folderSelector.click();
});

// 选中文件夹后处理路径显示
folderSelector.addEventListener('change', (e) => {
  const files = e.target.files;
  if (files.length === 0) return;
  
  // 从第一个文件的相对路径中提取文件夹名
  const folderName = files[0].webkitRelativePath.split('/')[0];
  // 也可以直接使用原生控件的value（会带fakepath前缀）
  // pathInput.value = folderSelector.value;
  
  pathInput.value = folderName;
});

注意：这种方式无法获取真实本地完整路径，浏览器会隐藏真实路径信息，仅能拿到文件夹名称或带fakepath的伪路径。

方案二：使用File System Access API（现代浏览器推荐） #

如果目标用户使用Chrome 86+、Edge 86+等现代Chromium内核浏览器，推荐用File System Access API，它能直接获取目录句柄，甚至在用户授权后获取完整本地路径：

HTML代码 #

<button id="selectFolderBtn">选择文件夹</button>
<input type="text" id="folderPathInput" readonly placeholder="选中的文件夹路径">

JavaScript代码 #

const selectBtn = document.getElementById('selectFolderBtn');
const pathInput = document.getElementById('folderPathInput');

selectBtn.addEventListener('click', async () => {
  try {
    // 弹出文件夹选择对话框
    const directoryHandle = await window.showDirectoryPicker();
    
    let displayPath = directoryHandle.name;
    
    // 请求用户授权获取完整路径（可选）
    if ('queryPermission' in directoryHandle) {
      const permissionStatus = await directoryHandle.queryPermission({ mode: 'read' });
      if (permissionStatus === 'granted') {
        // 解析完整路径（格式可能因浏览器略有差异）
        const pathSegments = await directoryHandle.resolve();
        displayPath = pathSegments.join('\\');
      }
    }
    
    // 将路径显示到输入框
    pathInput.value = displayPath;
  } catch (error) {
    // 用户取消选择或发生错误时的处理
    console.error('文件夹选择失败:', error);
  }
});

优势：交互更流畅，支持获取真实本地路径（需用户授权），且无需依赖原生文件上传控件的样式。

内容的提问来源于stack exchange，提问作者priya roops