【笔记】图片上传并回显

发表于 更新于 阅读次数：

前言

HTML图片上传并回显

上传按钮

accept="image/*"：指定上传的文件类型为图片

1
2
<input type="file" accept="image/*" onchange="submit()">
<img src="">

回显动作

1
2
3
4
5
6
7
8
9
10
11
12
13
function submit(e) {
  // 获取文件
  let file = e.target.files[0];
  // 获取文件读取对象
  let reader = new FileReader();
  // 重写文件读写对象的onload函数
  reader.onload = (function () {
    // 将图片的Base64写入img标签
    document.querySelector("img").src = reader.result;
  });
  // 重新读取文件
  reader.readAsDataURL(file);
}

完成

参考文献

CSDN——奇迹码农