HTML file input 无法通过 JavaScript 自动触发 click 是浏览器安全限制；需用 opacity:0 或绝对定位隐藏 input 并透传点击；accept 属性须规范书写（如 ".jpg,.png"），否则 iOS 等平台失效；FileList 非数组，预览图片用 URL.createObjectURL() 并及时 revoke；移动端兼容性差，尤其 iOS 多种属性叠加时需 UA 检测降级。
HTML file input 怎么触发点击事件
浏览器禁止 JavaScript 自动触发 <input type="file"> 的 click，这是安全限制，不是 bug。想用按钮控制文件选择，得靠“视觉隐藏 + 透传点击”来绕过。
- 把
<input type="file">设置为opacity: 0或position: absolute; left: -9999px，不 display: none（否则无法触发） - 给自定义按钮绑定
click事件，手动调用fileInput.click() - 别用
label for="xxx"然后隐藏 input——部分 iOS Safari 会失效，尤其配合 multiple 或 accept 时
accept 属性写错会导致选不到文件
accept 不是过滤器，只是提示浏览器弹出文件选择器时默认筛选类型；写错格式或 MIME 类型不标准，iOS 和某些 Android 浏览器直接忽略该限制，Windows Chrome 则可能禁用整个选择框。
- 图片限制：用
accept="image/*"或更精确的accept=".jpg,.jpeg,.png"（注意点号不能漏） - PDF：必须写
accept=".pdf"，accept="application/pdf"在 iOS 上基本无效 - 多个类型用英文逗号分隔，不要空格：
accept=".docx,.xlsx"✅，accept=".docx, .xlsx"❌
获取文件后怎么读取内容或预览
用户选完文件，input.files 是一个 FileList，不是数组，不能直接用 map/forEach；预览图片要用 URL.createObjectURL()，但记得用完 revoke，否则内存泄漏。
-
input.files[0]是第一个文件，input.files.length才是数量 - 读文本文件：用
FileReader.readAsText(file)，监听onload拿e.target.result - 预览图片：
const url = URL.createObjectURL(file); img.src = url;，上传成功后立即执行URL.revokeObjectURL(url) - 大文件（>100MB）别用 FileReader 读全文，考虑分片或直接 FormData 提交
移动端 file input 常见兼容性问题
Android 微信内置浏览器、旧版 iOS Safari 对 capture、multiple、甚至 change 事件触发时机都有偏差，不能全信文档。
立即学习“前端免费学习笔记（深入）”；
-
capture="camera"在微信里常被忽略，建议改用accept="image/*" capture并加文案提示“请使用相机拍摄” -
multiple在 iOS 12–14 上可能只允许选 1 张，且不报错；可先检查input.files.length是否为 1 再提示 -
change事件在 iOS 上有时不触发（比如取消选择），要补监听input事件或加个“重选”按钮强制清空input.value = ""
