MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

FileReader.readAsDataURL()

该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成(DONE),并触发 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 。

规范

Specification Status Comment
File API
FileReader
Working Draft Initial definition

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.6 (1.9.2)[1] 7 10[2] 12.02[3] 6.0
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 32 3 10 11.5 6.0

[1] 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前,上述方法中所有的 Blob 参数都只能是一个 File 对象。根据最新的 FileAPI 草案,现在的所有的 Blob 参数既可以是 Blob 对象也可以是一个 File 对象。在Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) 之前,FileReader.error 属性会返回一个 FileError 对象。根据最新的FileAPI草案,现在的  FileReader.error会返回一个 DOMError 对象。

[2] IE9有一个 File API Lab.

[3] Opera从11.10开始 部分支持 .

相关链接

文档标签和贡献者

 此页面的贡献者: Cattla
 最后编辑者: Cattla,