JavaScript通过FileReader API实现本地图片预览：监听input[type="file"]的change事件，校验图片类型与大小后，用readAsDataURL读取文件并在onload中赋值给img.src。
JavaScript 实现文件上传前的本地图片预览，核心是利用 FileReader API 读取用户选择的图片文件，并将其转为 Data URL 后赋值给 <img> 元素的 src 属性。整个过程不涉及服务器，纯前端完成，响应快、体验好。
监听文件输入变化
通过 <input type="file"> 获取用户选择的文件，关键是监听其 change 事件：
- 设置
accept="image/*"可限制只选图片（但需注意：这只是提示，不能替代后端校验） - 检查
e.target.files是否存在且长度大于 0，避免无文件时出错 - 只取第一个文件（
files[0]），如需多图预览，可遍历files
用 FileReader 读取并显示图片
FileReader 是浏览器内置对象，用于异步读取文件内容：
- 调用
readAsDataURL(file)将图片转为 base64 编码的 Data URL - 在
onload回调中，把reader.result赋给<img>的src - 建议在读取前清空
img.src，防止旧图残留
添加基础校验与容错处理
提升健壮性，避免因异常中断预览：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 检查文件类型：
file.type.startsWith('image/')，过滤非图片（如 .txt、.pdf） - 检查文件大小（例如限制 ≤ 5MB）：
file.size <= 5 * 1024 * 1024 - 在
onerror中捕获读取失败（如文件损坏、权限问题），给出友好提示
完整示例代码（可直接运行）
HTML 部分：
<input type="file" id="fileInput" accept="image/*"><img id="preview" alt="图片预览" style="max-width: 300px; margin-top: 10px;">
JS 部分：
const fileInput = document.getElementById('fileInput');const preview = document.getElementById('preview');
fileInput.addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file) return;
if (!file.type.startsWith('image/')) {
alert('请选择一张图片文件');
return;
}
if (file.size > 5 * 1024 * 1024) {
alert('图片大小不能超过 5MB');
return;
}
const reader = new FileReader();
reader.onload = function () {
preview.src = reader.result;
};
reader.onerror = function () {
alert('图片读取失败，请重试');
};
reader.readAsDataURL(file);
});
