HTML5で便利になったAPIの一つがファイルの読み込み、FileReaderではないでしょうか。しかし非同期処理で行うものが多く、実装が若干面倒なイメージがあります。さらにこのデータを扱うのはファイルボックスまたはファイルのドラッグ&ドロップと二種類あるのも面倒です。 そこで使ってみたいのがFileReader.jsです。ファイルに加えてクリップボードまで共通のインタフェースで扱えるようになります。

FileReader.jsの使い方

FileReader.jsのデモです。ファイルボックス、ドラッグ&ドロップ、クリップボードを扱えます。

デモ画面

例えばファイルをドロップするUIの場合。データの受け取り型を指定しておけば、後はファイルが送られてくる仕様です。

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

通常であればファイルのドラッグ&ドロップイベントを取って、FileReader APIを使って読み込んで…といった処理を非同期の中で行いますが、FileReader.jsを使えば処理結果だけが返ってきます。面倒な記述を行わないで済むので、とても手軽です。

FileReader.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

FileReader.js bgrins/filereader.js: A lightweight wrapper for the JavaScript FileReader interface