HTML 原生 不支持同时选择文件和文件夹，需通过双输入框协同触发实现“伪混合选择”，本文详解兼容方案与实现细节。
html 原生 `` 不支持同时选择文件和文件夹，需通过双输入框协同触发实现“伪混合选择”，本文详解兼容方案与实现细节。
在现代 Web 开发中，用户常期望通过一次操作选取任意组合的文件与文件夹（例如上传项目源码时既选 .js 文件，也选 src/ 和 assets/ 目录）。遗憾的是，HTML 标准目前不支持单个 <input> 元素同时启用 multiple 与 webkitdirectory（或 mozdirectory）——二者语义冲突：multiple 针对文件列表，而 directory 属性会强制将选择范围限定为目录及其递归内容，浏览器会忽略 multiple 并仅允许单目录选取。
因此，可行的解决方案是采用逻辑协同的双输入框策略：一个专用于多文件选择，另一个专用于多目录选择（注意：尽管 webkitdirectory 在规范中未定义 multiple 行为，但 Chrome 117+ 和 Edge 117+ 已支持在同一 <input> 中按住 Ctrl/Cmd 多选多个文件夹，前提是显式添加 webkitdirectory 且不设置 multiple；但为兼容性与语义清晰，仍推荐分离设计）。
以下是经过实测的完整实现：
<button id="mixedPickerBtn">? Select Files & Folders</button> <!-- 隐藏的多文件选择器 --> <input type="file" id="filePicker" multiple style="display: none;" /> <!-- 隐藏的多目录选择器（Chrome/Edge 支持 Ctrl+Click 多选） --> <input type="file" id="folderPicker" webkitdirectory mozdirectory style="display: none;" />
const filePicker = document.getElementById('filePicker');
const folderPicker = document.getElementById('folderPicker');
const btn = document.getElementById('mixedPickerBtn');
// 点击按钮时依次触发两个选择器
btn.addEventListener('click', () => {
filePicker.click();
// 延迟触发 folderPicker，避免部分浏览器因焦点冲突导致第二个不弹出
setTimeout(() => folderPicker.click(), 10);
});
// 处理文件选择结果
filePicker.addEventListener('change', (e) => {
const files = Array.from(e.target.files);
console.log('✅ Selected files:', files.filter(f => !f.webkitRelativePath)); // 普通文件
});
// 处理文件夹选择结果（含子路径）
folderPicker.addEventListener('change', (e) => {
const entries = Array.from(e.target.files).map(file => ({
name: file.name,
fullPath: file.webkitRelativePath || file.name,
size: file.size,
lastModified: file.lastModified
}));
console.log('? Selected folders & contents:', entries);
});⚠️ 关键注意事项：
-
浏览器兼容性：
webkitdirectory仅被 Chromium（Chrome/Edge）和 Firefox（mozdirectory）支持，Safari 完全不支持目录选择；无 polyfill 可绕过此限制。 -
安全限制：目录选择返回的
FileList中每个File对象的webkitRelativePath字段包含完整子路径（如"project/src/index.js"），可用于服务端还原目录结构；普通文件则无此字段。 -
用户体验优化：可结合
label或drag-and-drop区域增强交互，但底层仍需双输入框协作。 -
不要滥用
multiple+directory：在folderPicker上添加multiple属性不仅无效，还可能干扰某些浏览器的行为。
综上，虽然无法真正“单次原生混合选择”，但通过双输入框协同触发 + 合理的事件处理，已能稳定、清晰地满足绝大多数场景下的混合资源选取需求。
