是的，iOS 16.4 之前 iPad 上 不支持批量选择，仅能单次选一个文件；iOS 16.4+ 仅在「文件」App 导入时有限支持，微信等 WebView 完全不支持 multiple 和 accept 过滤。
HTML5 的 multiple 批量选择？
是的，iOS 16.4 之前的所有版本（包括绝大多数仍在使用的 iPad），原生 会降级为单文件选择 —— 点一次只能选一个，无法勾选多个。这不是 bug，是 Safari/iOS 的有意限制，源于其文件系统沙盒模型和 UI 设计逻辑。
真正能触发多选的唯一路径是：用户长按文件列表 → 点「选择」→ 手动勾选多个。但这个操作必须在系统文件 Picker 中完成，且仅在部分场景下出现（如配合 webkitdirectory 或某些 PWA 权限）。
- iOS 16.4+ 开始有限支持
multiple，但仅限于「从「文件」App 导入」时可用，微信、钉钉等内嵌 WebView 完全不认 -
accept属性（如accept=".pdf,.jpg"）可过滤类型，但不影响多选能力 - 使用
webkitdirectory可以整目录上传，但需用户手动点进文件夹再选中目录（非直观批量），且只返回目录内文件，不递归子目录
iPad 上真正可行的 HTML5 批量导入方案
绕过系统限制的核心思路：不依赖单次 多选，而是允许用户「多次快速选择」+ 前端聚合处理。关键在于体验优化和状态管理。
- 用
+ 检测 iOS 版本，对旧版自动 fallback 到「多次点击」模式 - 每次选择后，把
FileList追加进一个全局Array，并用URL.createObjectURL()预览缩略图（避免重复读取） - 提供「清空已选」「撤销上一次」按钮，弥补无多选 UI 的操作断层
- 提交前统一校验：去重（按
file.name + file.size + file.lastModified）、大小限制、类型白名单
<input type="file" id="fileInput" accept=".jpg,.png,.pdf" multiple><div id="preview"></div>
<script>
const input = document.getElementById('fileInput');
const preview = document.getElementById('preview');
let allFiles = [];
input.addEventListener('change', (e) => {
const files = Array.from(e.target.files);
allFiles.push(...files);
files.forEach(file => {
const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = url;
img.style.maxWidth = '80px';
preview.appendChild(img);
});
});
</script>
为什么不能用 webkitdirectory 当万能批量方案？
它看似能一次选中整个文件夹，但在 iPad 上实际表现极不稳定：
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
- 只有当用户从「文件」App 进入、且目标是 iCloud Drive 或「位置」中明确挂载的目录时才生效；本地「下载」或「iCloud 云桌面」文件夹常被忽略
- 选中目录后，Safari 返回的是该目录下**一级文件**，不会包含子目录里的文件（即非递归）
- 返回的
File对象缺少完整路径信息，file.webkitRelativePath在 iPad 上基本为空字符串 - 无法与
multiple共存：会被 Safari 忽略multiple
微信 / 钉钉等 App 内打开 H5 页面时的现实约束
这些 App 使用的是自研 WebView（非 Safari），对 HTML5 文件 API 支持更弱：
- 绝大多数版本完全禁用
multiple和webkitdirectory，连单文件选择都要跳转到系统相册或文件 App - 即使用户点了「选择多个照片」，回调给前端的仍是单个
File，且没有「继续添加」入口 - 唯一稳定路径：引导用户先在「文件」App 中将目标文件整理进同一文件夹 → 用「分享」→「在「XX 应用」中打开」→ 接收
FileList（部分新版支持）
真正的批量导入，在 iPad 上从来不是纯前端能闭环的事。它始终依赖系统级交互路径是否打通，而这个路径在不同 App、不同 iOS 版本、不同文件来源之间，差异比代码逻辑本身还大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
