创建时间:2021-07-09
更新时间:20 小时前
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编码
};
};