FileReader.js 在浏览器中读取文件信息 - 文章教程

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

发布于 2019-12-10 字数 3943 浏览 1394 评论 0

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: 10+
  • Firefox: 10+
  • Chrome: 13+
  • Opera: 12+
  • Safari: partial

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0