URL.createObjectURL(file)是最快本地图片预览方式，不编码不网络传输，需监听change、校验类型、创建URL、赋值img、及时revoke并清理DOM。
直接用 URL.createObjectURL(file) 生成临时 blob URL，是目前最轻量、响应最快的本地图片预览方式。它不编码、不转 base64，也不走网络，纯粹在内存中建立引用，浏览器原生支持渲染。
核心步骤：监听 + 过滤 + 创建 + 清理
关键不在“怎么写”，而在“怎么组织逻辑”——避免卡顿、白屏、内存堆积。
- 给
<input type="file">绑定change事件，别用click或input - 从
e.target.files[0]取 File 对象，检查file.type.startsWith('image/')，跳过非图文件（如 .txt、.pdf） - 调用
URL.createObjectURL(file)得到类似blob:http://localhost/abc123的地址 - 把这个 URL 赋给
<img src alt="HTML5 中怎么用 file 类型结合 URL.createObjectURL 生成本地图片的高性能预览地址" >，浏览器立刻解码并渲染 - 每次换图前，先用
URL.revokeObjectURL(oldUrl)释放旧引用（哪怕只预览一张图也建议做）
多图预览时防止 DOM 堆叠和内存泄漏
用户反复点选、勾选“多选”后，files 是全新列表，但页面上的 <img alt="HTML5 中怎么用 file 类型结合 URL.createObjectURL 生成本地图片的高性能预览地址" > 可能还留着上一轮的节点和 URL 引用。
- 每次触发
change前，清空预览容器：previewContainer.innerHTML = ''，或更稳妥地逐个移除：while (previewContainer.firstChild) previewContainer.removeChild(previewContainer.firstChild) - 为每张图单独保存其对应的 URL（例如用数组或 Map 记录），预览结束或切换时统一
revoke - 页面卸载前（
beforeunload或visibilitychange隐藏时）批量清理所有已创建的 URL
兼容性与安全细节
现代 Chrome、Firefox、Safari 全支持 File 和 createObjectURL，但要注意几个实际限制：
立即学习“前端免费学习笔记（深入）”；
-
input.value永远拿不到真实路径（如C:\xxx.jpg），返回的是伪造路径（C:\fakepath\xxx.jpg），不要尝试拼接或校验它 -
accept="image/*"必须加上，移动端会据此唤起相册而非文档选择器，提升体验 - 生成的 blob URL 是一次性内存引用，关闭标签页自动失效；但长期驻留（如 SPA 页面不刷新）必须手动
revoke，否则可能引发明显卡顿甚至崩溃 - PDF、TXT 等文件也能用
createObjectURL生成 URL，但<img alt="HTML5 中怎么用 file 类型结合 URL.createObjectURL 生成本地图片的高性能预览地址" >不识别它们——想预览 PDF 得用<iframe src="url"></iframe>或第三方库
一个干净可用的单图预览示例
不依赖框架，可直接粘贴运行：
const uploader = document.getElementById('uploader');
const preview = document.getElementById('preview');
let currentUrl = null;
uploader.addEventListener('change', e => {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
if (currentUrl) URL.revokeObjectURL(currentUrl);
currentUrl = URL.createObjectURL(file);
preview.src = currentUrl;
preview.style.display = 'block';
});
// 页面离开前清理
window.addEventListener('beforeunload', () => {
if (currentUrl) URL.revokeObjectURL(currentUrl);
});
