JavaScript
HTML5
jQuery

File APIを利用し、inputで選択された画像をサーバーにアップロードせずに表示

More than 1 year has passed since last update.

File API

<input type="file"> で選択された画像ファイルをプレビュー表示したい!
javascript で value を取得して・・・ あれ?という経験はないだろうか。
残念ながら、input タグの value から選択された画像を表示することはできない。

そこで利用するのが、HTML5のFile APIである。
File API の FileReader インターフェースから、ユーザーのローカル環境にある画像ファイル等を非同期的に読み込み、表示することを実現する。

File API (日本語訳)
FileReader - Web API インターフェイス | MDN

サンプルコード

javascript 部分のサンプルコードは以下。
なお今回は jQuery も利用している。

$(function() {
    $('input:file').on('change', function() {
        var fileReader = new FileReader();

        fileReader.onload = function(event) {
            var loadedImageUri = event.target.result;
            $('body').append('<img src=' + loadedImageUri + '>');
        };

        fileReader.readAsDataURL(this.files[0]);
    });
});

FileReader.onload
load イベントのハンドラ。読込が成功したときにイベントが発生。

FileReader.readAsDataURL
指定された Blob オブジェクトを読み込む。終了後の result プロパティにはファイルの Data URI Schemeを格納する。

取得した Data URI Scheme を src とした img タグを動的に生成することで、以下の様に選択された画像ファイルを動的にプレビュー表示することができた。

124.PNG