H5实现上传图片预览

发表于 |

H5新增了FileReader对象，该对象允许Web应用程序异步读取存储在用户计算机上的文件内容，构造函数为FileReader()，它返回一个新构造的FileReader实例。

实例拥有一个名为readAsDataURL 的方法，该方法会读取指定的 Blob或 File对象。

一旦读取完成，会触发onload事件。该事件的result属性将包含一个data:URL格式的字符串（base64编码） ，进而实现图片预览。

HTML

1
2
<input type="file" id="choose" value="选择文件">
<img id="show" />

JS

1
2
3
4
5
6
7
8
9
var btn = document.getElementById('choose'),
  show = document.getElementById('show')
btn.onchange = function() {
  var reader = new FileReader()
  reader.readAsDataURL(this.files[0])//以File对象作为参数
  reader.onload = function(e) {
    show.src = e.target.result //这里获取到图片base64编码
  }
}

在JSFiddle上运行

在JSRun上运行