javascript 中可通过监听 input 的 change 事件，用 filereader 读取图片文件为 data url 并赋值给 img 的 src 实现本地预览；需校验文件存在、类型和大小，确保体验与健壮性。
在 JavaScript 中，通过监听 input 元素的 change 事件，可以获取用户选择的图片文件，并用 FileReader 读取为 Data URL，再赋值给 <img> 的 src 属性，实现上传前的本地预览。整个过程不涉及服务器，纯前端完成。
绑定 change 事件并读取文件
确保 input 类型为 file，且接受图片格式（如 accept="image/*"）。在 change 回调中检查是否有文件被选中，再取第一个文件（files[0]）：
- 使用
event.target.files获取 FileList 对象 - 判断
files.length > 0，避免未选文件时出错 - 推荐只处理
files[0]，多图预览需遍历或另做处理
用 FileReader 生成预览地址
FileReader 是浏览器内置 API，用于异步读取文件内容。对图片文件，常用 readAsDataURL() 方法，它会把文件转成 base64 编码的 URL：
- 创建
new FileReader()实例 - 监听
load事件，在回调中获取reader.result（即 Data URL） - 将该结果赋给
<img>元素的src属性即可显示 - 注意：不要在
onload外直接使用result，因为读取是异步的
完整示例代码
HTML 结构简洁明了：
对应 JS：
const input = document.getElementById('upload');const img = document.getElementById('preview');
input.addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function () {
img.src = reader.result;
};
reader.readAsDataURL(file);
});
可选增强点
提升体验和健壮性的小技巧：
- 添加类型校验：检查
file.type.startsWith('image/')，过滤非图片文件 - 限制大小：比如
if (file.size > 5 * 1024 * 1024)提示“图片不能超过 5MB” - 清空上次预览：在读取新文件前设
img.src = ''，避免旧图残留 - 支持拖拽或点击触发：可额外绑定
label或用click()模拟点击input
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
