点击无反应主因是被 CSS 隐藏或覆盖；须用 opacity: 0 配合定位隐藏，禁用 display: none 或 visibility: hidden；必须用户主动点击触发，JS 模拟需在手势同步回调中执行；accept 仅提示，后端必校验；multiple 启用多选，但 files 是 FileList，需 Array.from() 转换；重复选同文件不触发 change，应在回调中立即设 value = '' 清空；前端校验应结合 size 和文件扩展名，勿依赖 type；iOS Safari 对隐藏和类型判断有特殊限制。
怎么让 <input type="file"> 正常触发选择文件
点不动、没反应，大概率是被 CSS 隐藏或覆盖了。浏览器对 <input type="file"> 有严格的安全限制：它必须是用户主动点击（不是 JS 模拟 click），且不能完全透明（opacity: 0 可以，但 display: none 或 visibility: hidden 会失效）。
常见做法是用一个按钮“盖住”它，再通过 label[for] 或包裹 label 关联：
<label class="upload-btn"> 选择文件 <input type="file" id="fileInput" style="position: absolute; width: 1px; height: 1px; opacity: 0;"> </label>
- 不要用
display: none或visibility: hidden隐藏<input>，否则 iOS Safari 和部分安卓 WebView 会拒绝触发 - 如果用 JS 调用
click()，必须发生在用户手势事件（如click、touchend）的同步回调里，异步（比如setTimeout）会失败 -
accept属性只起提示作用，不阻止用户选其他类型，后端必须校验
多文件上传怎么配 multiple 和 files 对象
加 multiple 属性就能选多个，但 JS 读取时容易忽略它是 FileList（类数组，不是真数组），直接用 .map 会报错。
<input type="file" id="multiInput" multiple accept=".pdf,.jpg,.png">
-
document.getElementById('multiInput').files返回的是FileList，要转成数组才能用map/forEach：Array.from(e.target.files) -
accept=".pdf"在 Windows 上可能不生效（系统按 MIME 类型匹配），更可靠的是accept="application/pdf"或同时写两者：accept=".pdf,application/pdf" - 单个
File对象有name、size、type，但type可被伪造，不可信
为什么 change 事件在重复选同一个文件时不触发
这是浏览器故意设计的行为：如果用户两次选同一个文件路径，input 的 value 没变，就不会派发 change 事件。这不是 bug，是防止误操作重复提交。
立即学习“前端免费学习笔记（深入）”；
- 解决办法是在每次选完后手动清空
value：e.target.value = ''（注意：必须在change回调里立刻执行） - 清空后再次选同一文件就能重新触发，但要注意：这会让表单重置，如果用了
FormData追加过文件，得重新 append - 别用
input的reset()方法清空，它会影响整个表单；只操作当前input的value
上传前怎么限制大小和类型（不依赖后端）
前端校验只是体验优化，不能替代后端检查，但能立刻给用户反馈。重点是别只看 file.type，要结合 file.size 和扩展名双重判断。
- 检查大小：直接读
file.size（单位字节），比如限制 5MB：if (file.size > 5 * 1024 * 1024) {...} - 检查类型：用
file.name.split('.').pop().toLowerCase()取扩展名比file.type更靠谱（后者在 Chrome 里可能为空） - 注意 iOS Safari 对某些格式（如 HEIC）返回的
type是空字符串，仅靠 MIME 判断会漏掉 - 大文件建议加
onloadstart和onprogress监听，避免用户以为卡死
文件上传看似简单，但跨浏览器行为差异、安全策略限制、以及用户反复操作带来的状态残留，才是实际开发中最耗时间的部分。特别是 value 清空时机、FileList 的不可变性、还有 iOS 对隐藏 input 的特殊处理——这些点不踩一遍很难记住。
