首页 分类
阿荡的博客

H5实现上传图片预览

创建时间: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编码
  };
};