怎么使用HTML5中FileReader接口将本地图片转换为Base64编码并展示-H5教程-PHP中文网

使用 filereader 的 readasdataurl() 方法可将本地图片转为 base64 data url 并实时预览：先通过 input[type="file"] 获取文件，再用 filereader 异步读取，成功后赋值给 img.src；需校验文件类型、处理错误，并注意体积增大和浏览器兼容性。

怎么使用html5中filereader接口将本地图片转换为base64编码并展示

直接用 FileReader 读取本地图片文件，调用 readAsDataURL() 方法即可得到 Base64 编码的 Data URL，再赋值给 <img> 的 src 属性就能实时展示。

1. 创建文件选择控件并监听变化

添加一个 <input type="file"> 元素，限制只接受图片格式，并绑定 change 事件：

<input type="file" id="imageInput" accept="image/*"><br>@@##@@

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>@@##@@<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>