使用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表单预览上传的图片步骤【详解】" >——那只是显示变小，原始文件没变，后续上传还是大图。
v3.0修正版更新：新增加的功能：1、网店logo在线上传。2、添加图片上传预览功能。3、增加ICP备案字段，在线添加。4、添加管理员管理功能。5、添加送货详细设置功能。6、增加客户端验证功能。7、增加5种样式。修正的地方：1、订单不能删除。2、产品图片不能删除。3、管理员不能修改密码。4、小数显示不正常，比如0.68显示为.685、退出不方便。6、前台热门商品文字显示不换行。7、商品详细介绍页面
立即学习“前端免费学习笔记（深入）”；
- 必须用
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，其实只是相机写进了元数据。
