We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

该方法会读取指定的 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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,