使用 FileReader 的 readAsDataURL() 方法可将本地图片转为 Base64 Data URL 并实时预览：先通过 input[type="file"] 获取文件，再用 FileReader 异步读取，成功后赋值给 img.src；需校验文件类型、处理错误，并注意体积增大和浏览器兼容性。
直接用 FileReader 读取本地图片文件，调用 readAsDataURL() 方法即可得到 Base64 编码的 Data URL，再赋值给 <img> 的 src 属性就能实时展示。
1. 创建文件选择控件并监听变化
添加一个 <input type="file"> 元素，限制只接受图片格式，并绑定 change 事件：
<input type="file" id="imageInput" accept="image/*"><br><img id="preview" alt="图片预览" style="max-width: 100%; margin-top: 10px;">
JavaScript 中监听选中动作：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.getElementById('imageInput').addEventListener('change', function(e) {<br> const file = e.target.files[0];<br> if (file && file.type.startsWith('image/')) {<br> // 后续处理<br> }<br>});
2. 使用 FileReader 读取为 Data URL
创建 FileReader 实例，设置 onload 回调，在读取成功后获取 Base64 字符串（即 result）：
立即学习“前端免费学习笔记（深入）”；
-
readAsDataURL(file)会自动将文件内容转为形如data:image/png;base64,iVBORw...的字符串 -
result属性在load事件触发后才有效，不能在readAsDataURL调用后立即访问 - 推荐同时监听
onerror处理读取失败情况（如文件过大、权限问题）
const reader = new FileReader();<br>reader.onload = function() {<br> document.getElementById('preview').src = reader.result;<br>};<br>reader.onerror = function() {<br> console.error('读取文件失败');<br>};<br>reader.readAsDataURL(file);
3. 完整可运行示例
把上面逻辑组合起来，就是一个轻量、无依赖的本地图片预览功能：
<input type="file" id="imageInput" accept="image/*"><br><img id="preview" alt="预览区域"><br><br><script><br>document.getElementById('imageInput').addEventListener('change', function(e) {<br> const file = e.target.files[0];<br> if (!file || !file.type.startsWith('image/')) return;<br><br> const reader = new FileReader();<br> reader.onload = () => {<br> document.getElementById('preview').src = reader.result;<br> };<br> reader.onerror = () => console.error('读取失败');<br> reader.readAsDataURL(file);<br>});<br></script>
4. 注意事项与常见问题
- Base64 数据体积比原始文件大 ~33%，不适合超大图（如 >5MB），可先用
file.size做简单限制 - Chrome/Firefox/Safari 等现代浏览器均支持 FileReader，无需兼容 IE9 及以下
- 读取过程是异步的，不能用同步方式获取结果；若需后续处理（如上传、裁剪），应在
onload内进行 - Data URL 可直接用于 CSS
background-image或 CanvasdrawImage()
