使用原生 html 和 javascript，监听文件输入框的 change 事件，通过 filereader 读取选中图片并动态渲染到页面上，实现即时、无刷新的本地图片预览功能。
使用原生 html 和 javascript，监听文件输入框的 change 事件，通过 filereader 读取选中图片并动态渲染到页面上，实现即时、无刷新的本地图片预览功能。
在 Web 表单中，为用户提供所选图片的即时视觉反馈，不仅能提升交互体验，还能减少误操作。无需后端参与或第三方库，仅用标准 HTML + JavaScript 即可轻松实现——核心在于 <input type="file"> 的 change 事件监听与 FileReader API 的配合使用。
以下是一个完整、可直接运行的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片实时预览</title>
<style>
.preview-container {
display: flex;
align-items: center;
margin: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.preview-container input[type="file"] {
padding: 8px;
}
.preview-container img {
max-width: 120px;
max-height: 120px;
margin-left: 24px;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
display: none; /* 初始隐藏，待加载后显示 */
}
</style>
</head>
<body>
<div class="preview-container">
<input type="file" id="fileInput" accept="image/*" />
<img id="imagePreview" alt="图片预览" />
</div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const previewImg = document.getElementById('imagePreview');
// 清除之前可能存在的预览（如重新选图）
previewImg.src = '';
previewImg.style.display = 'none';
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
previewImg.src = e.target.result;
previewImg.style.display = 'block';
};
reader.onerror = function() {
console.warn('图片读取失败，请检查文件格式。');
};
reader.readAsDataURL(file);
} else if (file) {
console.warn('仅支持图片文件，请选择 JPG、PNG、GIF 等格式。');
}
// 若未选择任何文件（例如取消选择），则保持隐藏状态
});
</script>
</body>
</html>✅ 关键要点说明：
-
accept="image/*"属性限制文件选择器默认只显示图片类型，提升用户体验； - 使用
file.type.startsWith('image/')做基础 MIME 类型校验，避免非图片文件触发错误渲染； -
FileReader.readAsDataURL()将文件转为 Base64 数据 URL，可直接赋值给<img src alt="如何在用户选择图片后实时预览图像" >； - 每次触发
change时先重置<img alt="如何在用户选择图片后实时预览图像" >的src和display，防止旧预览残留； - 添加了
reader.onerror回调，便于调试和用户提示（生产环境可升级为友好 Toast 提示）。
⚠️ 注意事项：
- 此方案仅预览本地文件，不涉及上传行为；如需上传，请另行结合
FormData与fetch/XMLHttpRequest； - Safari 旧版本对某些图片编码支持有限，建议测试主流浏览器（Chrome/Firefox/Safari/Edge 最新版）；
- 移动端同样适用，但注意
max-width/max-height应适配小屏设备。
该方法轻量、兼容性好（IE10+）、零依赖，是现代前端图片预览的基础实践方案。
