2022年input file DOM字段仍无法同时上传文件与目录？单DOM元素混合选择方案及功能支持疑问

2022年的现状：仍无法通过单个DOM元素实现混合选择 #

没错，在2022年的时候，浏览器依然不支持通过单个<input type="file">元素同时选择独立文件和目录。你提到的<input type="file" directory multiple>属性组合，确实只能让用户在“选择目录（包含其下所有文件）”和“选择单个/多个独立文件”中二选一——当设置了directory属性后，浏览器的文件选择器会强制用户选择目录，无法单独勾选文件；去掉directory则只能选文件，不能选目录。

有没有单元素实现混合选择的方法？ #

截至2022年，没有原生的单DOM元素方案能实现这个需求。不过社区里有一些变通的 workaround：

• 最常用的是在页面上放置两个<input>元素：一个带directory multiple处理目录，另一个不带directory处理文件，然后在前端将两个输入的文件列表合并，统一处理上传逻辑。这种方法虽然不是单元素，但体验上可以通过样式调整模拟成一个“统一选择入口”（比如隐藏原生输入，用自定义按钮触发）。
• 还有一些实验性的API探索，但都没有成为标准，并且兼容性极差，不适合生产环境使用。

为何该功能历经十年诉求仍未支持？ #

核心原因主要集中在安全与隐私以及API设计兼容性两个层面：

1. 安全风险：允许混合选择文件和目录，可能让恶意网站更容易探测用户的本地文件系统结构——比如通过获取目录和零散文件的路径关联，推断用户的文件组织习惯，甚至获取敏感文件的位置信息。浏览器厂商一直对这类可能泄露隐私的API持谨慎态度。
2. 规范与兼容性包袱：<input type="file">的API设计已经存在多年，大量现有网站依赖其现有行为。如果修改原生API支持混合选择，可能会打破现有代码的逻辑（比如某些网站依赖directory属性强制用户选择目录的行为）。规范制定需要平衡新需求和现有生态的稳定性，推进速度自然较慢。
3. 优先级问题：相对于开发者的这个诉求，浏览器厂商有更多高优先级的特性需要推进（比如性能优化、新的Web标准支持、安全补丁等），这类细分需求的排期会靠后。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov