选择指定文件后自动上传其所属整个父文件夹的技术方案咨询

你需要的功能目前在现代浏览器环境下完全可以实现，有两种成熟的实现路径，都符合浏览器安全规范：

方案一：引导用户直接选择目标父文件夹（优先推荐） #

这是兼容性最好、交互最顺畅的方案：

• 给文件选择的input标签添加webkitdirectory属性，当前所有主流浏览器（Chrome、Edge、Firefox、Safari 11.1及以上版本）都已支持该属性
• 示例代码：

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

• 用户触发选择后会唤起文件夹选择弹窗，选中对应文件夹后，你可以通过返回的FileList拿到该文件夹下所有文件的信息，每个文件对象的webkitRelativePath属性会携带文件相对于所选根文件夹的完整相对路径，你可以直接匹配到你需要的指定文件，同时上传全部文件夹内容即可。

方案二：用户选单个文件后申请父文件夹访问权限 #

如果你的交互逻辑必须保留“用户先选中指定单个文件”的流程，可以用File System Access API实现：

• 该API在Chrome、Edge 86及以上版本，Safari 15.2及以上版本都已适配
• 实现逻辑：
  • 用户选中单个指定文件后，先获取该文件对应的FileSystemFileHandle实例
  • 调用实例的getParent()方法申请访问其父文件夹，此时浏览器会弹出明确的授权提示
  • 用户同意授权后，你就可以遍历获取父文件夹下的所有同级文件、子文件夹内容，满足你的上传需求
• 注意该API在浏览器隐身模式下默认禁用，低版本浏览器不支持，需要做降级兼容处理。

两种方案都需要用户主动触发授权操作，符合浏览器“无用户明确授权不允许访问本地文件”的安全策略，不存在静默获取本地文件的可能。

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