HTML5 File APIを使用しローカルファイルを読み込む簡単なサンプル

HTML5 File APIとは

今までセキュリティ上、ローカルファイルにアクセスできなかったが、HTML5から「File API」というのを使用し、ローカルファイルを読み込むことができるようになった。

サンプルと解説

画像ファイルを選択すると、その画像ファイルをプレビューだけするサンプル。
今まで、サーバーに画像をアップしないとできなかったことが、HTML + JavaScriptだけで完結できる。
これにより、HTML5のアプリケーションの幅が広がる。

また、SNSサイトなどでアイコン画像を、サーバーにアップする前にプレビューするときなどに使用される。
※キャンセルさせる画像は、わざわざサーバーにアップされないメリットがある

HTML

<input type="file" id="files" name="files[]">
<output></output>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

JavaScript

$(function(){

// --------------------------------------------------------
// 関数定義
// --------------------------------------------------------
function handleFileSelect(evt) {
    var files = evt.target.files; // inputタグからFileオブジェクトを取得

    // ファイル数分実行
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader(); // ファイル読み取り用オブジェクト作成

        // ファイルを読み時
        reader.onload = (function(theFile) {
            return function(e) {
                // サムネイル用のimgタグ
                var $html = ['<img class="photo" src="', e.target.result,'" title="', escape(theFile.name), '">'].join('');

                // サムネイルタグを生成
                $('output').append($html);
            };
        })(f);

        // データURLにエンコードした内容を格納
        reader.readAsDataURL(f);
    }
}



// --------------------------------------------------------
// Ready時実行
// --------------------------------------------------------
// File APIのサポートチェックし、ボタンを押した時に実行
if (window.File && window.FileReader && window.FileList && window.Blob) {
    $('#files').on('change', handleFileSelect);
} else {
    alert('お使いのブラウザはサポートしておりません');
}


});

補足

Fileオブジェクトのプロパティ

• name : ファイルの名前
• type : ファイルのMIME/TYPE
• size : ファイルのサイズ(バイト)
• urn : ファイルのURN(URL)

参考URL

• JavaScript で File API を使用してファイルを読み取る
• File APIを使ってローカルファイルを読み込む