正确触发图片选择需用可见按钮或label关联隐藏file input，accept仅提示类型；预览用url.createobjecturl()更高效；formdata提交须设enctype="multipart/form-data"且不手动设content-type；移动端兼容需分场景处理。
怎么用 <input type="file"> 正确触发图片选择
浏览器原生不支持直接“打开图片上传”，必须靠用户主动点击触发。很多新手写个 click() 想自动弹窗，结果被拦截——这是浏览器安全策略强制限制的。
正确做法是：用一个可见的按钮（或 <label></label>）绑定到隐藏的 <input type="file" accept="image/*">，用户点按钮才真正触发选择框。
-
accept="image/*"能过滤文件类型，但只是提示作用，不能阻止用户手动选非图文件 - 不要给
<input>设display: none后再用 JS 调click()，多数现代浏览器会静默拒绝 - 推荐用
<label for="xxx"></label>关联，语义清晰且无障碍友好
FileReader 读取图片并预览的最小可行代码
选完文件后不能直接用路径显示（file:// 协议受限），得转成 data: URL 或用 URL.createObjectURL()。
FileReader 更适合小图预览（比如头像裁剪前），大图建议用 URL.createObjectURL() 避免内存拷贝：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
const url = URL.createObjectURL(file);
document.querySelector('#preview').src = url;
// 记得在不需要时调用 URL.revokeObjectURL(url)
});
为什么 FormData 提交后后端收不到图片？
常见错误不是前端没传，而是后端没按 multipart/form-data 解析，或者前端漏了关键配置。
- HTML 表单必须设
enctype="multipart/form-data"，否则<input type="file">的值根本不会发出去 - 用
fetch时，**不要手动设Content-Type头**，让浏览器自动生成 boundary；设了反而会导致后端解析失败 -
FormData.append('avatar', file)中第一个参数是字段名，要和后端约定一致（比如 Python Flask 用request.files.get('avatar')） - 如果上传多个图，用
e.target.files是FileList，不是数组，需转：[...e.target.files]
移动端拍照/相册选择经常失效？
Android 和 iOS 对 capture 属性支持不稳定，别全靠它控制来源。
- 加
capture="environment"可能强制调用后置摄像头，但 iOS Safari 16.4+ 才支持，旧版直接忽略 - 更可靠的方式是提供两个按钮：“拍照”和“从相册选择”，分别用不同
accept+capture组合 - iOS 微信内置浏览器对
input type="file"有额外限制，有时需加webkit-directory或改用第三方 SDK（如腾讯云 COS 的直传组件）
图片上传看着简单，但每个环节都卡在细节上：触发时机、MIME 判断、二进制流转、服务端解析逻辑、移动端兼容性……少一个条件，就可能白忙半天。
