最常见点击无反应是因css隐藏方式错误；应避免display:none或visibility:hidden，改用opacity:0配合绝对定位，并用包裹input；js模拟click须在用户手势回调内执行。
为什么点了没反应
最常见原因是 CSS 隐藏方式错误。浏览器强制要求用户主动点击，display: none 或 visibility: hidden 会让控件彻底失效，尤其在 iOS Safari 上必挂。
正确做法是用 opacity: 0 配合绝对定位盖住它，再用 <label></label> 包裹或关联：
<label class="upload-btn">上传文件<input type="file" id="fileInput" style="position: absolute; width: 1px; height: 1px; opacity: 0;"></label>
- 禁用
display: none、visibility: hidden、pointer-events: none - JS 模拟 click 必须发生在用户手势回调内（如
button.addEventListener('click', () => input.click())），setTimeout或异步调用会失败 - 移动端 Safari 对
accept和隐藏逻辑更敏感，建议加webkit-directory（如需目录选择）或测试真机
多文件上传时 files 是个“假数组”
input.files 返回的是 FileList，不是 Array —— 直接调用 .map() 或 .forEach() 会报错。
必须先转成真数组：
const files = Array.from(e.target.files);
- 如果用了
multiple但后端期望接收数组字段（如 PHP 的files[]），HTML 中 name 要写成name="files[]" -
FileList是只读的，无法 push 或 splice，所有操作都得基于转换后的数组 - 选中 100 个文件时，
Array.from()本身不卡，但后续遍历 +FormData.append()可能阻塞主线程，大数量建议分批处理
fetch 上传时 Content-Type 别乱设
用 FormData 发请求时，fetch 会自动设置 Content-Type: multipart/form-data; boundary=...。手动加 headers: { 'Content-Type': 'multipart/form-data' } 会导致 boundary 缺失，后端收不到文件。
正确写法：
fetch('/api/upload', { method: 'POST', body: formData }); // 不要设 headers
-
formData.append('file', file)第二个参数必须是File或Blob，传字符串会当普通字段发过去 - 想传额外参数（如
user_id），直接formData.append('user_id', '123')即可，服务端一样能解析 - 如果后端用 Express，需配
multer；用 FastAPI，要用UploadFile类型，不能用Body
重复选同一个文件不触发 change 怎么办
这是浏览器标准行为：value 没变就不派发事件。不是 bug，是防误提交。
解决办法是在 change 回调里立刻清空 value：
e.target.value = '';
- 清空后再次点选同一文件就能重新触发
change - 注意：这会重置
input.files，如果之前已把文件塞进FormData，得重新 append - 如果用了拖拽上传（
drop事件），这个限制不存在，但要记得e.preventDefault()，否则浏览器会打开文件
accept 和 file.type 做提示，后端必须用魔术字节或 MIME 解析做最终判定——用户改后缀名或伪造 type，前端拦不住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
