浏览器禁止js非用户手势触发file input的click()，需用label绑定或透明覆盖实现；multiple/accept/name等属性须写在input上，change事件需校验files.length，且name属性为formdata提交必需。
点击按钮就能唤起文件选择框，这件事本身不难，但卡住人的地方往往不是逻辑，而是浏览器的安全限制和样式控制细节。
为什么直接 click() 原生 <input type="file"> 会失效
浏览器明确禁止 JS 在非用户手势（比如真实鼠标点击、触摸）上下文中触发 input[type="file"].click()。你写 button.onclick = () => fileInput.click()，在 Chrome/Firefox/Safari 新版本里大概率静默失败——不是 bug，是安全策略。
常见错误现象：
- 控制台没报错，但点按钮毫无反应
- 用
display: none隐藏了input，再调click()，部分浏览器直接拒绝 - 放在
setTimeout或异步回调里触发，也无效
必须用 <label></label> 绑定或透明覆盖
两种合法且稳定的方式：
✅ 推荐方式一：用 <label for="xxx"></label> 关联 input
<input type="file" id="uploader" name="file"><label for="uploader" class="btn">点击上传</label>- 点击
label就等于点击对应input，完全符合用户手势要求
✅ 推荐方式二：透明 input 叠在自定义按钮上
- CSS 写成：
position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100% - 不要用
visibility: hidden或display: none—— 这会让元素失去可点击性 - 确保父容器
position: relative，否则定位会乱
multiple 和 accept 要写在 input 上，不是 label
这些属性只对 input 生效：
-
multiple：允许 Ctrl/Cmd 多选或拖拽多个文件，不加就只能选一个 -
accept=".pdf,.docx"：仅影响文件选择器弹窗的默认过滤项，不能替代 JS 校验 -
name="files[]"：后端接收数组时更友好（尤其 PHP），但不是必须
注意：label 自己加 multiple 没用，它只是个“代理”，行为完全由绑定的 input 决定。
change 事件里别假设一定有文件
用户点开选择框又取消，input.files.length 就是 0，但 change 仍会触发。
所以实际监听要这样写：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
if (!e.target.files.length) return; // 用户取消了选择
const file = e.target.files[0];
// 后续处理...
});
如果支持多选，记得用 Array.from(e.target.files) 转成真数组再操作，不然 .map() 会报错。
最常被忽略的一点：没有 name 属性的 input，哪怕选了文件，FormData 里也拿不到字段名，后端收不到——这个坑比样式难调，但发生得更早。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
