JavaScriptでテキストファイルを読み取って表示する

JavaScriptでテキストファイルを読み取って、ブラウザに表示してみました。

目次

  1. 手順
  2. コード
  3. 試してみた

手順

こういう手順で進めます。

  1. 入力フォームでファイルを選択する
  2. FileReaderオブジェクトでファイルを読み込む
  3. pre要素に内容を書き込む

ちょっと独特なのは、FileReaderオブジェクトにloadイベントリスナを設定しておいて、オブジェクトのloadイベントが発生したらイベントリスナの側でタグの書き換えを行うというところです。

コード

まずはhtmlです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>File Read</title>
        <script type="text/javascript" src="./fileread.js"></script>
    </head>
    <body>
        <form>
            <input id="selectFile" type="file" name="selectFile" />
        </form>
        <pre id="output"></pre>
    </body>
</html>

form要素のinput要素のtype属性をfileにすると、ファイルを選択するフォームが表示されます。input要素にmultiple属性を設定しない場合は、単一のファイルの選択になります。

input要素とpre要素にid属性を指定しますが、JavaScriptの方でid属性を使って要素の検索をしますので、一意な名前にします。

JavaScriptのコードはfileread.jsというファイルに記述して、script要素で読み込みをします。

fileread.jsのコードは下記のようにします。

window.addEventListener('DOMContentLoaded', function(){
    document.getElementById("selectFile").addEventListener('change', function(){
        var input = document.getElementById("selectFile").files[0];
        var reader = new FileReader();
        reader.addEventListener('load', function(){
            document.getElementById("output").textContent = reader.result;
        }, false);
        reader.readAsText(input, 'UTF-8');
    }, false);
});

windowにaddEventListenerでDOMContentLoadedイベントのリスナを追加します。ドキュメントを読み込んだときに実行されます。

idがselectFileの要素(input要素)にaddEventListenerでchangeイベントのリスナを追加します。

idがselectFileの要素(input要素)のfilesプロパティを参照すると、選択されたファイルを取得できます。配列が帰ってくるのですが、ファイルが1つとわかっているので、インデックス0を指定します。

FileReaderのオブジェクトをreaderという名前で作ります。

FileReaderオブジェクトにloadイベントのリスナを追加し、outputというidの要素(pre要素)のtextContentプロパティにFileReaderオブジェクトのresultプロパティを入力するようにします。

FileReaderオブジェクトのreadAsTextメソッドを実行します。そうするとファイルが読み込まれるとともにloadイベントが呼び出されます。

試してみた

fileread.jsを読み込んでみました。

実行結果

広告

JavaScriptカテゴリの投稿