HTML file input 默认单选，需加 multiple 属性；form 同步提交致 JS 无法读取文件，须 preventDefault 并用 FormData + fetch；大文件需前后端协同调优限制；移动端兼容性问题需真机测试。
HTML <input type="file"> 为什么选不了多个文件
默认只允许选一个，是因为没加 multiple 属性。不加它，哪怕用户按住 ctrl 多选，浏览器也只提交第一个。
实操建议：
- 需要多选时，必须显式写
<input type="file" multiple> - 如果还用了
accept，注意某些安卓 WebView 对accept="image/*"+multiple组合支持不稳定，可降级为只用multiple - 服务端接收时，
name="files"在多数后端（如 PHP 的$_FILES['files']['name']）是数组，别当成单个字符串处理
form 提交后页面跳转了，怎么拿不到文件内容
因为原生 form 提交是同步的，页面一刷新，JS 就断了——你根本没机会读取 input.files 或调用 FileReader。
实操建议：
- 想预览、校验或压缩，必须阻止默认提交：
event.preventDefault()，改用FormData+fetch或AJAX -
FormData.append('file', input.files[0])才能正确附带二进制数据；直接 appendinput元素会失败 - 后端若用 Node.js Express，默认中间件（如
body-parser）不解析文件，得用multer或busboy
上传大文件时卡死或报错 413 Request Entity Too Large
这不是前端问题，是服务器拦下来的。Nginx 默认限制 1MB，Apache 和大多数云函数也有类似上限。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 前端可先用
input.files[0].size做粗略拦截，比如 >100MB 就提示“请压缩后上传” - Nginx 需配
client_max_body_size 200M;，且要放在http、server或location块里，位置错了不生效 - 若走 CDN 或 API 网关（如 Cloudflare、阿里云 API 网关），它们也有独立的 body size 限制，得单独调
移动端点击 <input type="file"> 没反应或唤不起相册
常见于 iOS Safari 和部分安卓 WebView：标签被 CSS 遮挡、透明度为 0、或者父元素有 pointer-events: none，都会导致点击穿透失效。
实操建议：
- 别用
display: none或visibility: hidden隐藏原生 input，改用position: absolute; left: -9999px - iOS Safari 不支持
capture="user"唤前后置摄像头，但capture="camera"可以；安卓则两者都可能不认，优先测试真机 - 微信内嵌浏览器对
accept="video/*"支持极差，有时连选择框都不弹，建议 fallback 到accept="*"并在 JS 里过滤类型
文件上传看着简单，但跨端行为差异、服务端配置、大文件流控这三块最容易漏掉。尤其别信“本地跑通就等于上线可用”。
