JavaScript 中表单事件怎么在 file input 中通过 change 事件读取图片 Base64-js教程-PHP中文网

通过change事件配合filereader的readasdataurl方法可将选中图片转为base64 url；需校验文件类型与大小，异步读取后在onload中获取reader.result赋值给img.src或上传。

javascript 中表单事件怎么在 file input 中通过 change 事件读取图片 base64

在 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：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

创建 new FileReader()
监听 load 事件，在回调中获取 reader.result
该值即为可用的 Base64 图片 URL，可直接赋给 <img src> 或上传到服务器

简单示例代码

HTML：

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

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);
});