HTML表单怎样预览上传的图片_HTML表单预览上传的图片步骤【详解】

使用url.createobjecturl()将file对象转为临时内存url供img标签预览，需监听input事件、及时revoke旧url防泄漏，并校验图片大小（≤5mb）和格式（jpeg/png/gif），大图或特殊需求须用canvas处理exif方向及压缩裁剪。

用 URL.createObjectURL() 快速预览本地图片

浏览器不直接读取文件路径，所以不能用 src="file:///..." 显示上传的图。必须把 File 对象转成临时内存 URL，再喂给 <img alt="html表单怎样预览上传的图片_html表单预览上传的图片步骤【详解】" > 的 src。

常见错误是拿到 input.files[0] 后直接赋值给 img.src，结果空白——因为 File 不是 URL。

• 只在用户选择文件后触发，监听 input 事件（不是 change，后者在失焦时才可能延迟触发）
• 每次选新图前，先调用 URL.revokeObjectURL() 清掉旧的 URL，否则内存泄漏
• URL.createObjectURL() 返回的 URL 只在当前文档生命周期有效，页面刷新就失效

const input = document.querySelector('input[type="file"]'); const img = document.querySelector('img'); <p>input.addEventListener('input', () => { if (input.files.length === 0) return; const file = input.files[0]; if (!file.type.match('image.*')) return;</p><p>// 清旧的 if (img.src) URL.revokeObjectURL(img.src); // 换新的 img.src = URL.createObjectURL(file); });

限制图片大小和格式避免崩溃

用户可能拖入几十 MB 的 RAW 或 PNG，createObjectURL 虽不解析内容，但大文件仍会让 <img alt="HTML表单怎样预览上传的图片_HTML表单预览上传的图片步骤【详解】" > 解码卡顿甚至 OOM。同时，有些格式（如 WebP 在老版 safari）无法显示。

• 检查 file.size，建议上限设为 5 * 1024 * 1024（5MB），超限就提示并清空 input.value
• 用 file.type 做基础过滤：'image/jpeg'、'image/png'、'image/gif' 最稳妥
• 别只信 accept="image/*"，它纯属提示，用户能手动改扩展名绕过

预览前缩放或裁剪需用 Canvas 处理

如果要求“上传即压缩到 800px 宽”或“强制裁成正方形”，不能靠 CSS 缩放 <img alt="HTML表单怎样预览上传的图片_HTML表单预览上传的图片步骤【详解】" >——那只是显示变小，原始文件没变，后续上传还是大图。

立即学习“前端免费学习笔记（深入）”；

• 必须用 Canvas 绘制并调用 toBlob() 或 toDataURL() 生成新 Blob
• 注意 canvas.toBlob() 是异步的，回调里才能拿到处理后的文件
• 压缩 JPEG 时传 0.8 这类 quality 参数，但低于 0.6 易出现明显色块
• 记得重设 input.files ——它只读，得用 new DataTransfer() 构造新 FileList

移动端拍照后方向错乱（EXIF Orientation）

手机拍的照片带 EXIF 方向信息，但 <img alt="HTML表单怎样预览上传的图片_HTML表单预览上传的图片步骤【详解】" > 标签默认忽略它，导致预览时横图变竖、镜像翻转。

• 纯前端修复必须解析 EXIF，推荐轻量库 exif-js 或现代替代 piexifjs
• 更简单粗暴的做法：统一用 Canvas 绘制时根据 orientation 值做 rotate/scale 矫正
• 注意 ios Safari 对 createObjectURL 的缓存策略更激进，有时要加时间戳参数强制刷新 img.src

EXIF 方向是真实存在的坑，不处理的话，用户会以为你程序 bug，其实只是相机写进了元数据。