File APIはクライアントマシンのファイルにブラウザからアクセスするためのAPI仕様。

以下の2通りの方法でファイルにアクセスできる

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

ファイルの中身は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");
        }
    });
});