手机端input[type="file"]点击无反应，主因是被display:none或visibility:hidden隐藏导致浏览器禁用交互；必须用opacity:0+position:absolute覆盖按钮或label包裹触发，且accept仅过滤类型，capture才决定调起摄像头或相册。
手机端点开没反应？先看是否被隐藏或拦截
很多页面在移动端点击“上传”按钮毫无反应，根本原因不是代码写错，而是 input[type="file"] 被 display: none 或 visibility: hidden 直接隐藏了——浏览器会禁用其交互能力，click() 也无效。必须用 opacity: 0 + position: absolute 覆盖在自定义按钮上，或者用 label 包裹并设置 for 属性来触发。
- 别用
display: none隐藏input，哪怕它只是用来“借路” - 检查父容器有没有
pointer-events: none，微信内置 WebView 尤其敏感 - 确保没有 JS 阻止了默认行为（比如
e.preventDefault()错加在 label 上）
想调摄像头或相册？用 capture，不是 accept
accept 只是过滤文件类型提示，真正让手机直接打开摄像头或相册的是 capture 属性。它和 accept 是独立的，要一起用才可靠：
-
<input type="file" accept="image/*" capture="camera">→ 强制调起后置摄像头（部分安卓机型可能弹选项） -
<input type="file" accept="video/*" capture="camcorder">→ 视频录制 -
<input type="file" accept="audio/*" capture="microphone">→ 录音 -
capture和multiple互斥：加了multiple后，capture失效，因为多选逻辑不兼容原生捕获设备
为什么选了文件却传不上去？字段名、enctype、Content-Type 三处必查
手机端上传失败，90% 出在服务端收不到数据。常见断点位置：
- 表单提交时漏了
enctype="multipart/form-data"→ 浏览器把文件当空字符串发，后端收不到files - 用
fetch时手动设置了headers: {'Content-Type': 'multipart/form-data'}→ 破坏了 boundary，后端解析直接报 400 -
FormData.append()的第一个参数（字段名）和服务端约定不一致，比如前端传'file'，Django 期待'myfile'，Express multer 配的是'upload' - 移动端某些 WebView（如旧版 QQ 浏览器）对
accept=".jpg,.png"不识别，换成accept="image/jpeg,image/png"更稳
上传前能预览吗？FileReader 是唯一靠谱方案
手机端不能直接用 URL.createObjectURL(file) 预览视频（部分 iOS Safari 会报错），但 FileReader 兼容性好，且不依赖服务端：
立即学习“前端免费学习笔记（深入）”；
const file = e.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
document.getElementById('preview').src = e.target.result;
};
reader.readAsDataURL(file);
}
- 不要对非图片类型（如视频、PDF）盲目调
readAsDataURL，大文件会卡死内存 - 预览前务必校验
file.type，避免用户绕过accept上传恶意类型 - iOS Safari 对
capture="camera"拍出的 HEIC 格式支持差，建议后端也做格式转换兜底
