Read Text File

  1. HTML5 から File API が使えるようになり、ローカルのファイルをブラウザ上で直接、取り扱えるようになりました。
    ブラウザが File API に対応しているかを調べます。
    Text File HTML5
    <script type="text/javascript">
    if (window.File)
    {   window.alert("File APIが実装されてます。"); }
    else
    {   window.alert("本ブラウザではFile APIが使えません");
    }
</script>
  2. form からテキストファイルを選択します。
    参照ボタンをクリックしてテキストファイルを選択して下さい。
    今回は、選択したファイル名が表示されるだけです。
    name="txt" は、入力したテキストを印字する領域ですが今回は印字しません。
    Text File Form
    <form name="test">
<input type="file" id="selfile" /><br/>
<textarea name="txt" rows="10" cols="60"></textarea>
</form>
  1. form で選択したテキストファイルからデータを入力して name="txt" に印字します。
    Text File Print
  2. input type="file" を指定すると、ファイル選択のダイアログが表示されます。
    getElementById() で id="selfile" のファイル名を取得し、変数 obj1 に格納します。
    <form name="test">
<input type="file" id="selfile" /><br/>
<textarea name="txt" rows="10" cols="60"></textarea>
</form>

<script type="text/javascript">
var obj1 = document.getElementById("selfile");
  3. obj1 に addEventListener() で change イベントを追加し、ファイルが選択された場合の処理を記述します。
    target.files で選択されたファイルを取得し、 変数 file に格納します。
    FileReader を作成し、変数 reader に格納します。
    続いて readAsText() を使って、テキスト形式でファイルを読み込みます。
    file[] は複数のファイルが扱えるように配列になっています。
    一個のときは file[0] を指定します。
    複数のファイルの扱いは File Copy を参照して下さい。
    読込完了時の処理は onload イベントハンドラに記述します。
    読み込んだテキストを reader.result で取得し、テキストエリアに書き出します。
    //ダイアログでファイルが選択された時
obj1.addEventListener("change",function(evt)
{   var file = evt.target.files;

    //FileReaderの作成
    var reader = new FileReader();
    //テキスト形式で読み込む
    reader.readAsText(file[0]);
    //reader.readAsText(file[0], "Shift-JIS");  
  
    //読込終了後の処理
    reader.onload = function(ev)
    {   //テキストエリアに表示する
        document.test.txt.value = reader.result;
    }
},false);
</script>
  1. HTML5 から使えるようになった File API ですが ローカル環境, サーバー環境, ブラウザによっては動かないかも知れません。
    2015/09/22 ローカル環境, サーバー環境で Internet Explore11 と Chrome 45.0.2454.99 で実行を確認しました。
    2015/10/07 ローカル環境, サーバー環境で Windows10 & Edge で実行を確認しました。
    2017/04/08 サーバー環境(サーバーにアップロードしたページを実行)で改めてテストします。
    クライアント側(パソコン側)の C:\DATA\Test\ に shift_jis.txt, utf8.txt, utf16.txt のファイルを置いて確認しました。
    文字コード Windows10 & Edge Windows10 & Goole Chrome
    shift_jis.txt 全角が文字化けする 全角が文字化けする
    utf8.txt 正常に表示される 正常に表示される
    utf16.txt 正常に表示される 正常に表示される
  2. ファイル選択で表示する TEXT FILE は "utf-8" または "utf-16" でタイプして下さい。
    "Shift-JIS" のときは readAsText() を次のように修正して下さい。
        //reader.readAsText(file[0]);
    reader.readAsText(file[0], "Shift-JIS");
    第２引数を省略すると UTF-8 と解釈されます。
    "utf-8" のときは、ファイル先頭に識別コードが格納されているので、省略しても文字化けしないようです。
    文字コードの説明は Programing Guid を参照して下さい。
  3. jQuery Get のページで jQuery(ジェイクエリー)を使ったファイル入力を説明しています。
    File I-O で ActiveX を使ったファイルの入出力を説明しています。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)