通过change事件配合FileReader的readAsDataURL方法可将选中图片转为Base64 URL；需校验文件类型与大小，异步读取后在onload中获取reader.result赋值给img.src或上传。
在 file input 中通过 change 事件读取图片的 Base64，核心是利用 FileReader API 将选中的文件异步转为 Base64 字符串。
监听 change 事件并获取文件
用户选择文件后，input[type="file"] 元素会触发 change 事件。此时可通过 event.target.files 获取 File 对象列表：
- 只允许单图上传时，取
files[0] - 需校验是否为图片类型（如
file.type.startsWith('image/')） - 建议限制文件大小（例如不超过 5MB），避免读取卡顿
用 FileReader 转 Base64
FileReader 的 readAsDataURL() 方法会自动在结果前加上 data:[type];base64, 前缀，返回完整 Data URL：
- 创建
new FileReader() - 监听
load事件，在回调中获取reader.result - 该值即为可用的 Base64 图片 URL，可直接赋给
<img src>或上传到服务器
简单示例代码
HTML：
立即学习“Java免费学习笔记（深入）”；
<input type="file" id="avatarInput" accept="image/*"> <img id="preview" alt="预览">
JavaScript：
document.getElementById('avatarInput').addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
const reader = new FileReader();
reader.onload = function () {
document.getElementById('preview').src = reader.result; // Base64 URL
};
reader.readAsDataURL(file);
});
注意事项
-
FileReader是异步操作，不能直接 return 结果；需在onload内处理 - 大文件可能导致内存占用高，生产环境建议压缩或转为 blob URL 预览
- 移动端部分浏览器对
accept属性支持有限，需配合 JS 类型校验 - 若需多图，遍历
files并为每个文件创建独立FileReader
