使用fileReader实现图片预览

发表于 更新于 分类于

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，

使用 File 或 Blob 对象指定要读取的文件或数据。其中 File 对象可以是来自用户在一个<input>元素上选择文件后返回的 FileList 对象,

也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile()方法后返回结果.

1
2
3
<input type="file" />
<br />
<img src="" alt="" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var fileInput = document.querySelector("input[type=file]");
var viewImg = document.querySelector("img");
fileInput.addEventListener(
  "change",
  function () {
    //console.log(this.files[0]);
    var file = this.files[0];
    var reader = new FileReader();
    reader.addEventListener(
      "load",
      function () {
        console.log(reader.result);
        viewImg.src = reader.result;
      },
      false
    );
    reader.readAsDataURL(file);
  },
  false
);