H5实现上传图片预览

创建时间：2021-07-09

更新时间：1 分钟前

H5 新增了 FileReader 对象，该对象允许 Web 应用程序异步读取存储在用户计算机上的文件内容，它的实例有一个名为 readAsDataURL 的方法，该方法会读取指定的 Blob 或 File 对象。

一旦读取完成，会触发实例的 onload 事件。该事件的 result 属性将包含一个 data:URL 格式的字符串（base64 编码），把它塞到 img 的 src 属性里就实现了预览功能。 HTML

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

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编码
  };
};