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上运行