第7回 File APIとjQueryでつくるフォトギャラリー（前編）の続きです。

ドラッグした画像ファイルを読み込もう

前編ではドラッグした時のブラウザのデフォルトの挙動をキャンセルしました。ここからは、ドラッグした画像ファイルのデータを読み込めるようにしていきます。

ファイルを読み込むためのObjectを生成

var reader = new FileReader();

FileReader APIと呼ばれるものを使って、ユーザのコンピュータ内にあるファイルを読み込めるようにします。そのために、new演算子でObjectを作りreaderというインスタンス（実体）を生成します。

ドロップした画像ファイルのデータはイベントのe.originalEvent.dataTransfer.filesに配列として格納されます。そのデータをreadAsDataURL()で読み込みます。その読み込み処理が終わるとreaderのresultプロパティにはbase64エンコーディングされた文字列が格納されますのでそのデータを画像の表示に活用します。

まず、配列のデータにアクセスします。

配列

配列とは以下のように情報が格納されているデータのことです。

var saru = ['見ざる', '聞かざる', '言わざる'];

配列の中身を取得したい時、例えば文字列である'見ざる'を取得したい場合は

saru[0];

で取得できます。console.log(saru[0]);でコンソールに'見ざる'が出力できます。

今回は1つの画像をドロップするという前提なので1つ目の画像となり[0]を使用します。
画像のデータが格納されているのは、e.originalEvent.dataTransfer.files[0]になり、そのデータをreadAsDataURL()で文字列に変換します。

$dropFrame.on('drop',function(e){
  e.preventDefault();
  reader.readAsDataURL(e.originalEvent.dataTransfer.files[0]);
});

画像ファイルの読み込み（load）が終わったタイミングでresultプロパティに格納されいてるデータを見てみましょう。第4回 HTML5とJavaScriptで学んだaddEventListenerを使ってloadイベントが起こった時のreaderのresultプロパティをコンソールに出力してみましょう。

reader.addEventListener('load', function() {
  console.log(reader.result);
});

するとコンソールには以下のような文字列が表示されます。

これが、base64エンコーディングされたデータの文字列になります。

サムネイルを表示させよう

画像をドラッグしたら$('.thumbnail ul')の子要素にli要素とその子要素にimg要素をつくり、img要素のsrc属性の値に上記で取得した画像の文字列を設定します。そのコードが以下になります。

reader.addEventListener('load', function() {
  $('.thumbnail ul').append('<li><img alt=""></li>');
  $('.thumbnail ul li:last img').attr('src',reader.result);
});

• append()…セレクトした要素の内側の最後に引数内のコードを追加します。
• attr()…セレクトした要素に属性と属性値を設定したり、属性値を取得することができます。上記はsrc属性に属性値を設定する記述になります。

これでドラッグするごとに、サムネイル画像がli要素の最後に追加されるようになりました。

サムネイル画像をクリックして大きな画像を表示させよう

クリックイベントをトリガーとして画像を表示させればよいので、第7回で学んだ.on()を活用していきます。ただ、書き方が前回とは変わります。jQueryで生成した要素（サムネイル部分）は前回の.on()の書き方だとセレクトできません。このケースでは以下のコードになります。

$(document).on('click', '.thumbnailimg', function(){
  $('.photo').html('').children().attr('src',$(this).attr('src'));
});

前回のセレクタ部分は$(document)に変わり、今回のセレクタは.on()の第2引数に指定されています。

終了ボタンを押して不要なものを非表示

終了ボタンにはクラス名finishがありますので、クリックイベントをトリガーとして非表示させましょう。

$('.finish').on('click', function(){
  $(this).add('.dropFrame').fadeOut();
});

$(this)はセレクタで指定した$('.finish')のことを指します。.add()はセレクタを追加することができます。.fadeOut()はセレクタをフェードアウトさせます。

これでローカルの画像ファイルを使ったフォトギャラリーを完成しました。

file-api.jsのすべてのコード

//Objectを生成
var reader = new FileReader();

$(function(){

  var $dropFrame = $('.dropFrame');

  //ドラッグしたとき
  $dropFrame.on('dragover',function(e){
    e.preventDefault();
  });

  //ドロップしたとき
  $dropFrame.on('drop',function(e){
    e.preventDefault();
    reader.readAsDataURL(e.originalEvent.dataTransfer.files[0]);
  });

  //サムネイルの作成
  reader.addEventListener('load', function() {
    $('.thumbnail ul').append('<li><img alt=""></li>');
    $('.thumbnail ul li:last img').attr('src',reader.result);
  });

  //サムネイル画像をクリックした時の処理
  $(document).on('click', '.thumbnail img', function(){
    $('.photo').html('<img />').children().attr('src',$(this).attr('src'));
  });

  //終了ボタンを押した時の処理
  $('.finish').on('click', function(){
    $(this).add('.dropFrame').fadeOut();
  });

});

今回のコードはここからダウンロード出来ます