WebブラウザのJavaScriptでローカルのテキストファイルを読み込んで表示してみる。
HTMLでは、セキュリティの関係でファイル名を指定して直接開くようなことができないようになっているが、<input type="file">やブラウザへのファイルのドラック&ドロップでユーザーが指定したファイルは開けるようになっている。

今回は、<input>を使ってみる。えーっと、jQueryとTypeScriptを使う。
htmlには、<body>部分に<input id="file" type="file" />と<TextArea id="hoge" rows="25" cols="80"></TextArea>を書いとく。

TypeScriptの方はこんな感じになる。

$(() => {
    // ファイル選択されたときの処理を追加
    $("#file").change(e=> {
        var target: HTMLInputElement = <HTMLInputElement>e.target;
        var fileList: FileList = target.files;

        // ファイルを読み込む
        readFile(fileList[0]);
    });
});

// ファイルの読み込み
function readFile(file: File): void {
    // ファイルリーダを用意
    var reader = new FileReader();
    //ファイルタイプがテキストかチェック
    if (file.type.match(/text/)) {
        // 読み込み成功での処理を追加
        reader.onload = (e: Event) => {
            // 読み込んだテキストをテキストエリアに設定
            var fr: FileReader = <FileReader>e.target;
            $("#hoge").val(fr.result);
        }
        // 読み込み開始(結果を文字列で取得)
        reader.readAsText(file, "utf-8");
    }
}

読み込みはFileReaderを用意して、onloadは読み込み成功で発生するので読み込み処理終了後の処理を追加して、readAsTextで非同期読み込みを開始する。
FileReaderのonloadでは、読み込んだ結果がFileReaderのresultプロパティにセットされているので、それをTextAreaに設定してやる。と、読み込んだテキストが表示される。

イベントにはonload以外に

onabort 読込処理が中断されたときに発生する。
onerror 読込中にエラーが生じたときに発生する。
onloadstart 読込が開始されたときに発生する。
onloadend 読込が成功・失敗にかかわらず終了したときに発生する。
onprogress Blobコンテンツの読込中に発生する。読み込み中の経過表示で使用できる。

がある。詳しくは、他のサイトとかリファレンスをw

あと、inputの見た目が気に入らないときは、非表示にしてボタンなどのclickイベントで$("#file").click()を呼ぶとファイル選択ダイアログが表示される。

※注意


  • Androidではinputが非表示のとき、$("#file").click()を呼んでも何も起こらないのでどっかに表示しておく必要がある。
  • file.type.machでテキストかどうかチェックしているが、Androidで開くアプリによってはfile.typeが""(空文字列)になっている場合があったので注意が必要だ。