一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

File APIを使ってファイル読み込んでみた

今回はHTML5のFile APIを使って、「フォームに指定したファイルを読み込んでブラウザに表示させる」というのをやってみたいと思います。
細かい動きはjQueryでつくってみました。

これ↓
http://jsfiddle.net/danimal141/ey6SU/embedded/result/


コードはこちらです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ファイル読み込みサンプル</title>
  </head>
  <body>
    <form>
      <input id="upload" type="file"/>
    </form>
    <div id="img_area">
      <p>ここに画像表示しますよー</p>
    </div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $("#upload").on("change", function(event){
      var file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function(e){
        $("#img_area").empty().append($("<img>").attr("src", e.target.result));
      };
     reader.readAsDataURL(file);
    });
    </script>
  </body>
</html>

順番に見ていきます!!

まず、HTMLのほうですが、これはシンプルでファイルを指定するフォーム(type="file")と指定したファイルを表示させるエリアを用意しているだけです。

次にjQueryのほうは、


ファイルを指定するフォームに対してonメソッドでchangeイベントに対するハンドラを登録していく。
             ↓
event.target.files[0]で選択されたファイルを取得
             ↓
FileReaderではファイルを読み込むとloadイベントが発生するため、FileReaderのonloadにファイルのロードが完了した際に行う処理を記述していく
             ↓
具体的なファイル読み込み後の処理としては、
まず画像を表示するdivをempty()で一旦空にしてから、appendでimgを追加。そして先ほど取得したファイルのURLはevent.target.resultから取得できるので、それを追加したimgのsrc属性に指定。
             ↓
FileReaderインスタンスを生成し、readAsDataURLメソッドに先ほど取得したファイルを渡す。
んで画像が無事に表示される。


といった流れになります。


今回はreadAsDataURLというメソッドを使いましたが、その他にもreadAsArrayBufferとかreadAsTextとかメソッドはいくつかあるみたいです。

また、今回は普通にフォームにファイルを指定して、それを表示ってしましたけど、次はドラッグアンドドロップでいきなり画像を表示させるようなものをつくりたいです。

ちなみに今回は再び、この本を参考にさせて頂きました。
しばらくはこの本のサンプル改造して勉強していくつもりです!!お世話になります!!


プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)

プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)


がんばろー

小さなことからコツコツと。