File API

File APIはブラウザ上でファイルを扱うためのAPI仕様。

以下の2通りの方法でファイルを取得できる

• type=fileのinput要素からデスクトップのファイルにアクセス
• ドラッグアンドドロップAPIでデスクトップからドロップしたファイルにアクセス

古いAPIなのでPromiseではなくコールバックになっているのが残念

FileReader

ファイルの中身はFileReaderオブジェクトを使って非同期読み込みできる。

$(function(){
    $("#inputFile").change(function(){
        var file = this.files[0];
        if (file) {
            $("#fileName").text(file.name);
            $("#fileSize").text(file.size);
            $("#fileType").text(file.type);
        }
        if (file.type.match(/text/)) {
            var fr = new FileReader()
            fr.onload = function(event){
                $("#textViewer").text(event.target.result);
            };
            fr.readAsText(file, "utf-8");
        }
    });
});