＜input type=“file“＞标签，实现上传图片预览功能

一个找不到计算机相关的工作的菜鸟

已于 2022-11-20 16:31:15 修改

阅读量1.1k

点赞数 2

文章标签：前端 javascript 开发语言

于 2022-11-20 16:29:17 首次发布

本文链接：https://blog.csdn.net/qq_51304722/article/details/127950246

版权

效果图：

图片预览

起因：

最近在做图片上传功能时，发现只能得到图片的文件名，而无法知道这张图片到底长啥样？因此希望做一个图片预览功能，然后就一直去寻宝藏，功夫不负有心人，我寻到了，宝藏地址我放下面了。废话不多说，直接上代码：

HTML：

<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview" />

js:

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", () => {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}