网页开发：如何无需上传文件即可获取用户选择的文件夹名称？

当然有办法，你不需要实际上传任何文件，只需要利用浏览器提供的API读取文件夹的路径信息即可，具体实现如下：

实现步骤 #

• HTML结构：使用带webkitdirectory（兼容Chrome/Edge）和directory（兼容Firefox）属性的文件输入框，让用户可以直接选择文件夹：

<input type="file" id="folderPicker" webkitdirectory directory />

• JavaScript逻辑：监听输入框的change事件，从选中文件的webkitRelativePath属性中提取文件夹名称——这个属性会返回“文件夹名/文件名”的格式，只需要拆分取第一个部分就好，全程不会上传文件：

document.getElementById('folderPicker').addEventListener('change', function(e) {
  const files = e.target.files;
  if (files.length > 0) {
    // 从第一个文件的相对路径中提取文件夹名称
    const folderName = files[0].webkitRelativePath.split('/')[0];
    console.log('选中的文件夹名称:', folderName);
    // 这里可以把文件夹名展示给用户或者做其他处理
  }
});

关键说明 #

• 这个方法不会上传任何文件，只是读取浏览器允许访问的路径元数据，完全符合你的需求。
• 浏览器出于安全限制，不会返回文件夹的完整绝对路径，只能拿到相对路径中的文件夹名称，这是所有现代浏览器的统一安全策略。
• 兼容性：Chrome、Edge、Firefox、Safari等现代主流浏览器都支持这个特性，同时写上webkitdirectory和directory属性可以覆盖更多场景。

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