FileReader.js 在浏览器中读取文件信息

Question

FileReader.js 是一个简单的插件，封装了HTML5 中的 FileReader interface 方法，在使用上更加方便，而且是一个独立的插件，不依赖任何第三方库。

使用方法

1、引入插件

<script type='text/javascript' src='filereader.js'></script>

2、调用插件

FileReader.js 不需要任何第三方库，你可以直接调用，下面的示例代码：

// Accept files from the specified input[type=file]
FileReaderJS.setupInput(document.getElementById('file-input'), options);

// Accept dropped files on the specified file
FileReaderJS.setupDrop(document.getElementById('dropzone'), options);

// Accept paste events if available
FileReaderJS.setupClipboard(document.body, options);

// Attempt to use FileReaderSync in a worker if available.
FileReaderJS.setSync(true/false);

如果你使用 jQuery，你可以通过以下的方式调用插件

$("#file-input, #dropzone").fileReaderJS(opts);
$("body").fileClipboard(opts);

可选参数

下面是一些可选参数和回调函数，通过初始化 fileReaderJS 的时候引入

var options = {
  // CSS Class to add to the drop element when a drag is active
  dragClass: "drag",

  // A string to match MIME types, for instance
  accept: false,

  // An object specifying how to read certain MIME types
  // For example: {
  //  'image/*': 'DataURL',
  //  'data/*': 'ArrayBuffer',
  //  'text/*' : 'Text'
  // }
  readAsMap: { },

  // How to read any files not specified by readAsMap
  readAsDefault: 'DataURL',
  on: {
    beforestart: function(e, file) {
        // return false if you want to skip this file
    },
    loadstart: function(e, file) { /* Native ProgressEvent */ },
    progress: function(e, file) { /* Native ProgressEvent */ },
    load: function(e, file) { /* Native ProgressEvent */ },
    error: function(e, file) { /* Native ProgressEvent */ },
    loadend: function(e, file) { /* Native ProgressEvent */ },
    abort: function(e, file) { /* Native ProgressEvent */ },
    skip: function(e, file) {
      // Called when a file is skipped.  This happens when:
      //  1) A file doesn't match the accept option
      //  2) false is returned in the beforestart callback
    },
    groupstart: function(group) {
      // Called when a 'group' (a single drop / copy / select that may
      // contain multiple files) is receieved.
      // You can ignore this event if you don't care about groups
    },
    groupend: function(group) {
      // Called when a 'group' is finished.
      // You can ignore this event if you don't care about groups
    }
  }
};

简单示例

FileReaderJS.setupDrop(document.body, {
  readAsDefault: "DataURL",
  on: {
    load: function(e, file) {
      var img = new Image();
      img.onload = function() {
        document.body.appendChild(img);
      };
      img.src = e.target.result;
    }
  }
});

浏览器支持

• Internet Explorer: ¹⁰⁺
• Firefox: ¹⁰⁺
• Chrome: ¹³⁺
• Opera: ¹²⁺
• Safari: ^partial

相关链接

• 项目地址：http://www.briangrinstead.com/blog/filereaderjs
• FileReader specification
• FileReaderSync specification
• File API Event Handler specification
• Full Browser Support Graph for File API
• http://bgrins.github.io/filereader.js/