H5实现上传图片预览
创建时间：2021-07-09
更新时间：3 分钟前
H5 新增了 FileReader 对象，该对象允许 Web 应用程序异步读取存储在用户计算机上的文件内容，构造函数为 FileReader()，它返回一个新构造的 FileReader 实例。
实例拥有一个名为 readAsDataURL 的方法，该方法会读取指定的 Blob 或 File 对象。
一旦读取完成，会触发 onload 事件。该事件的 result 属性将包含一个 data:URL 格式的字符串（base64 编码） ，进而实现图片预览。
HTML
<input type="file" id="choose" value="选择文件">
<img id="show" />
JS
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编码
};
};