FileReader.readAsDataURL()函数的使用

Posted 2020-12-10 killbugme

readAsDataURL?方法会读取指定的?Blob或?File对象。读取操作完成的时候，readyState会变成已完成DONE，并触发?[loadend](https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/loadend "/zh-CN/docs/Web/Reference/Events/loadend")事件，同时?result属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

语法

instanceOfFileReader.readAsDataURL(blob);

参数

blob

即将被读取的Blob或?File对象。

示例

html

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

javascript

function previewFile() {
  var preview = document.querySelector(‘img‘);
  var file    = document.querySelector(‘input[type=file]‘).files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

读取多个文件的例子

HTML

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

JavaScript

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);
  }

}

注意:?Internet Explorer ?10 之前的版本并不支持??FileReader()。关于图片文件预览的兼容性解决方案，可以查看?crossbrowser possible solution for image preview?或者?this more powerful example?。

文章来自：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL