URL.createObjectURL不能直接用本地文件路径，因为浏览器安全策略禁止网页访问本地文件系统，它只能将File或Blob对象映射为临时内存URL；必须通过<input type="file">获取File实例后创建，且需手动调用revokeObjectURL释放内存。
URL.createObjectURL 为什么不能直接用本地文件路径
因为浏览器安全策略禁止网页直接读取本地文件系统路径（比如 C:\Users\abc\photo.jpg），URL.createObjectURL 不是把路径转成 URL，而是把内存里的 Blob 或 File 对象“映射”成一个临时、可访问的 URL。你得先拿到 File 实例——通常来自 <input type="file"> 的 files[0]。
怎么用 input[type=file] 触发预览
核心流程：监听文件选择 → 获取 File → 创建对象 URL → 赋值给 <img src> 或 <video src> 等支持的元素。
常见错误现象：URL.createObjectURL(null) 或传入字符串路径导致控制台报错 TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed。
- 必须确保
input.files.length > 0，否则input.files[0]是undefined - 创建的 URL 只在当前文档生命周期有效，页面刷新即失效；如需长期保留，得用
URL.revokeObjectURL()手动释放（尤其预览多个文件时） - 图片/视频格式需浏览器原生支持；例如 Safari 对 WebP 预览支持有限，可能显示空白但无报错
<input type="file" id="fileInput">
<img id="preview" width="300">
<script>
document.getElementById('fileInput').onchange = function(e) {
const file = e.target.files[0];
if (!file) return;
const url = URL.createObjectURL(file);
document.getElementById('preview').src = url;
// 后续替换新文件前，建议先释放旧 URL（避免内存泄漏）
// 可存 url 到变量，换图时调用 URL.revokeObjectURL(oldUrl)
};
</script>
预览后怎么清理内存
URL.createObjectURL 会保留对 Blob 的引用，不手动释放会导致内存持续占用，尤其在频繁选图、缩略图列表等场景下明显卡顿或崩溃。
立即学习“前端免费学习笔记（深入）”；
- 每次生成新 URL 前，先检查是否已有旧 URL，用
URL.revokeObjectURL(oldUrl)清理 - 页面卸载前（
beforeunload或visibilitychange）批量清理所有已创建的 URL - 注意：
revokeObjectURL不会报错，即使 URL 已被释放或无效，所以可以放心调用
能不能预览非图片/视频的文件（比如 PDF、TXT）
可以，但方式不同：URL.createObjectURL 本身不限制类型，但能否“预览”取决于目标元素是否支持该 MIME 类型。
-
<iframe src="blob:xxx">可加载 PDF（Chrome/Firefox 支持良好，Safari 对跨域 blob 有额外限制） -
<embed>或<object>也可用于 PDF，但兼容性更差，且部分浏览器会触发下载而非内嵌 - 纯文本（
text/plain）无法直接用<img>显示；需用FileReader读取为text再插入<pre> - 不建议用
createObjectURL预览大文件（>100MB），容易卡死主线程；应考虑分片读取或服务端预览
真正容易被忽略的是：Blob URL 的生命周期和作用域完全由 JS 控制，它不经过网络，也不受 CORS 影响——但一旦页面关闭或 iframe 卸载，对应资源就不可再访问，连 fetch() 都会失败。
