不能用 display: none 或 visibility: hidden 隐藏 input[type="file"]，否则在 ios safari、微信 webview 等环境中会彻底失活；必须用 position: absolute + left: -9999px 移出视口，保持其可访问性与事件响应能力。
不能用 display: none 或 visibility: hidden 隐藏 <input type="file">，否则在 iOS Safari、微信 WebView、部分安卓浏览器中会彻底失活——点不弹窗、click() 失败、屏幕阅读器读不到，且控制台不报错。
为什么 display: none 会让文件上传失效
浏览器明确将 display: none 的 input[type="file"] 从可访问性树和事件流中移除。它不再响应任何用户交互，包括 label 点击透传和 JS 的 .click() 调用。这不是兼容性差异，而是所有现代浏览器（Chrome 90+、Firefox 91+、Safari 15.4+）的统一安全策略。
- iOS Safari 17+ 和微信内置 WebView 中，
display: none后调用input.click()必然静默失败 -
visibility: hidden同样切断键盘焦点链，Tab 切入后按空格/回车无法触发选择框 - 即使 JS 强行
focus()，也会被拦截并抛出NotAllowedError
真正安全的隐藏方式：绝对定位移出视口
用 position: absolute 把 input 移出可视区域，同时保留其 DOM 存在、可聚焦、可被 label 关联、可响应 JS 调用的能力。这是目前 iOS 和 Android 兼容性最稳的方案。
- 必须设置
left: -9999px（或top: -9999px），不能只靠opacity: 0 - 推荐补上
width: 1px; height: 1px; margin: -1px;，避免某些 WebView 对极小尺寸处理异常 - 不要加
z-index: -1或让父容器有overflow: hidden，否则可能意外截断点击区域 - 示例 CSS：
input[type="file"] {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
}
label 包裹比 for/id 配对更可靠
直接用 <label></label> 包裹 <input type="file">，无需 ID 配对，语义清晰、无冲突风险，且在 iOS Safari 的 accept + multiple 组合下更稳定。
-
input必须是label的**直接子元素**，才能自动绑定 - 结构示例：
<label class="upload-btn"><input type="file" accept=".jpg,.png" multiple>选择图片</label> - 避免用
for="xxx"+id="xxx"方式——多个上传控件时易重复 ID，iOS 下偶发失效 - 若必须用
for，确保每个id全局唯一，且动态生成后同步更新for值
移动端和 accept 的坑必须手动填
iOS Safari 对 accept 属性解析极其严格：通配写法如 image/* 会被直接忽略，用户仍能选任意类型文件，起不到过滤作用。
- 正确写法：
accept=".jpg,.jpeg,.png,.pdf"（逗号分隔的精确扩展名） - 错误写法：
accept="image/*,application/pdf"（iOS 下等同于没写） - 监听
change事件时，e.target.files是FileList，不是数组；取[0].name前务必判空：e.target.files[0]?.name || '未选择文件' - 不要给
input加pointer-events: none，否则 label 点击无法透传
最常被忽略的是：隐藏不是目的，保功能才是核心。只要 input 退出了可访问性树或事件流，无论样式多漂亮，它就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
