原生js实现预览图片效果

预览单张图片：

前置知识

FileReader.prototype.readAsDataURL(blob)方法会使用base-64进行编码，编码的blob参数(即将被读取的Blob或File对象)由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。如：data:image/png;base64,xxxxxxx

要通过reader.onload中获取this.result，就是转为的base64格式的字符串。

html

    <img src="" alt="Preview Image" class="img" />

    <input type="file" οnchange="preview()" />

 js

function preview() {
  let img = document.querySelector(".img");
  let file = document.querySelector("input[type=file]");
  let reader = new FileReader();
  if (file.files[0]) {
    reader.readAsDataURL(file.files[0]);
    reader.onload = function () {
      img.width = 300;
      img.src = this.result;
    };
  }
}

预览多张图片

前置知识：

FileList类型，也就是 document.querySelector("input[type=file]").files 是一个伪数组，不能使用 forEach 进行遍历，而要通过 [].forEach.call(thisArg,callback) 来遍历。

html 

<div class="imgContainer"></div>

<input type="file" οnchange="preview()" multiple />

js

function preview() {
  let container = document.querySelector(".imgContainer");
  let files = document.querySelector("input[type=file]").files;
  if (files) {
    [].forEach.call(files, function (file) {
      if (/\.(png|jpe?g|gif)$/.test(file.name)) {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          let image = new Image();
          image.height = 300;
          image.src = this.result;
          image.title = file.name;
          container.appendChild(image);
        };
      }
    });
  }
}

 效果图