2

【笔记】图片上传并回显

 2 years ago
source link: https://feiju12138.github.io/2022/07/22/%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0%E5%B9%B6%E5%9B%9E%E6%98%BE/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

【笔记】图片上传并回显

2022-07-22

1

HTML图片上传并回显

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

<input type="file" accept="image/*" onchange="submit()">
<img src="">
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——奇迹码农


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK