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

TEXT ファイルを入力

  1. 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-8" でタイプして下さい。
    "Shift-JIS" のときは readAsText() を次のように修正して下さい。
        //reader.readAsText(file[0]);
        reader.readAsText(file[0], "Shift-JIS");  
    
    第2引数を省略すると UTF-8 と解釈されます。
    "utf-8" のときは、ファイル先頭に識別コードが格納されているので、省略しても文字化けしないようです。
    文字コードの説明は Programing Guid を参照して下さい。
  3. jQuery Get で jQuery(ジェイクエリー)を使ったファイル入力を説明しています。
    File I-O で ActiveX を使ったファイルの入出力を説明しています。

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