浏览器无法获取input[type="file"]的真实本地路径，正确做法是监听change事件，通过e.target.files[0]获取file对象，再用url.createobjecturl(file)生成临时blob url用于图片预览，并及时调用revokeobjecturl释放内存。
input type="file" 选中后怎么立刻拿到图片路径
浏览器出于安全限制，input[type="file"] 选中的文件无法直接获取本地真实路径（比如 C:\Users\...\photo.jpg），返回的 value 是伪造路径（如 C:\fakepath\photo.jpg）。真正能用的是 files 属性里的 File 对象 —— 它是只读的，但可传给 URL.createObjectURL() 生成临时内存 URL。
常见错误：直接读 input.value 想赋给 img.src，结果加载失败或显示空白。
- 正确做法是监听
input的change事件，取e.target.files[0] - 检查
file.type.startsWith('image/')避免非图文件报错 - 调用
URL.createObjectURL(file)得到一个以blob:开头的临时地址 - 用完记得在不需要时调用
URL.revokeObjectURL(url)防止内存泄漏（尤其频繁预览时）
预览多张图片时如何避免 DOM 节点重复添加
如果用户多次选择文件（尤其是勾选了“允许多选”），files 是新列表，但 DOM 可能还留着上一次的 img 元素。不清理就会越堆越多。
- 每次触发
change前，先清空预览容器，比如previewContainer.innerHTML = '' - 或者更稳妥：用
while (container.firstChild) container.removeChild(container.firstChild) - 别用
append()累加，除非你明确要保留历史预览 - 注意：
createObjectURL生成的 URL 是全局唯一的，旧 URL 不 revoke 也不会影响新预览，但会占内存
Chrome/Firefox/Safari 对 File API 的兼容性差异
File 和 URL.createObjectURL 在现代浏览器中都支持，但细节有坑：
- Safari 14.1+ 才支持
File对象的lastModified属性；旧版 Safari 返回0 - Firefox 在私密模式下可能限制
createObjectURL，表现为预览一闪而过或报SecurityError - 移动端 iOS Safari 对大图（>5MB）解码慢，预览可能卡顿甚至崩溃 —— 建议加
file.size 校验 - 所有浏览器都不允许通过 JS 主动触发
click()后再读files，必须用户真实点击（防自动上传）
不用第三方库，纯 HTML + JS 实现最小可行预览
以下代码可直接复制进 HTML 文件运行，无依赖：
<input type="file" id="fileInput" accept="image/*" multiple><div id="preview"></div>
<p><script>
const input = document.getElementById('fileInput');
const preview = document.getElementById('preview');</script></p><p>input.addEventListener('change', () => {
preview.innerHTML = '';
Array.from(input.files).forEach(file => {
if (!file.type.startsWith('image/')) return;
const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = url;
img.width = 150;
img.style.margin = '8px';
preview.appendChild(img);
// 清理时机：img 加载完成后或页面卸载前
img.onload = () => URL.revokeObjectURL(url);
});
});
</p>
关键点：Array.from() 把 FileList 转数组才能用 forEach；img.onload 里立刻 revokeObjectURL 是最省心的清理方式 —— 图片一旦渲染完成，临时 URL 就不再需要。
如果用户选了上百张图，onload 触发顺序不确定，个别 URL 可能被提前释放；这种场景建议统一在容器销毁时批量 revoke，而不是绑定到每个 img 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
