本地image文件转换为base64

一、背景需求

1、本地图片预览
2、上传某些特殊的图片,后端不存文件,存字符串

二、利用FileReader对象的readAsDataURL()

readAsDataURL 方法会读取指定的 BlobFile 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。

三、本地image文件预览实例

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // 确保 `file.name` 符合我们要求的扩展名
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}

参考文献 MDN-FileReader

推荐阅读更多精彩内容

  •   随着 HTML5 的出现,面向未来 Web 应用的 JavaScript API 也得到了极大的发展。这些 A...
    霜天晓阅读 480评论 0 0
  • 昨天接到一个需求,一个营销人员做线下活动,想弄一个人脸识别认证的功能。刚开始听,wtf,H5能人脸识别???后来老...
    MrOldK阅读 4,373评论 2 1
  • 在项目中经常遇到需要将本地图片上传至服务端的情况,免不了要本地预览选择的图片,图片太大的情况下还需要对图片进行一番...
    学不可以已阅读 1,909评论 0 0
  • 一:异步编程背景: JS引擎建立在单线程事件循环的概念上,js引擎同一时间只能执行一段代码,每当一段代码准备被执行...
    IDO0阅读 80评论 0 0
  • 刚刚百度了一下,童年到底是指哪个阶段,我选择是自出生到十岁这段时光。 这段时间我正好住在乡下,有不少好玩的记忆呢。...
    绒布寺阅读 101评论 0 0