Read Text File

バージョン確認

HTML5 から File API が使えるようになり、ローカルのファイルをブラウザ上で直接、取り扱えるようになりました。
ブラウザが File API に対応しているかを調べます。

【Source Code】
<script type="text/javascript">
    if (window.File)
    {   window.alert("File APIが実装されてます。"); }
    else
    {   window.alert("本ブラウザではFile APIが使えません");
    }
</script>

TEXT ファイルを入力

ボタンをクリックしてファイルを選択して下さい。
File API は開発途上でローカル環境, サーバー環境, ブラウザによっては動かないかも知れません。
2015/09/22 ローカル環境, サーバー環境で Internet Explore11 と Chrome 45.0.2454.99 で実行を確認しました。
2015/10/07 ローカル環境, サーバー環境で Windows10 & Edge で実行を確認しました。
2017/04/08 サーバー環境で改めてテストします。
Windows10 & Edge Windows10 & Goole Chrome
shift_jis.txt 全角が文字化けする 全角が文字化けする
utf8.txt 正常に表示される 正常に表示される
utf16.txt 正常に表示される 正常に表示される




【ファイル選択 Form】
<form name="test">
<input type="file" id="selfile"><br>
<textarea name="txt" rows="10" cols="60" readonly></textarea>
</form>
【Source Code】
<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.onload = function(ev)
    {   //テキストエリアに表示する
        document.test.txt.value = reader.result;
    }
},false);
</script>

  1. <body> に続いて、フォームにファイル選択のボタンとテキストエリアを設置します。
    クライアントが知らない間にファイルにアクセスされることが無いように type="file" で入力ファイルを選択します。
    これが File API の標準的な方法のようです。
    テキストエリアにデータを書き換えるため、name属性("txt")を付けています。
    <form name="test">
    <input type="file" id="selfile"><br>
    <textarea name="txt" rows="10" cols="60" readonly></textarea>
    </form>
    
  2. ファイルが選択された時は、getElementById() で inputタグを取得し、変数obj1に格納します。
    addEventListener() で change イベントを追加し、ファイルが選択された場合の処理を記述します。
    target.files で選択されたファイルを取得し、 変数 file に格納します。
    FileReader を作成し、変数 reader に格納します。
    続いて readAsText() を使って、テキスト形式でファイルを読み込みます。
    file[] は複数のファイルが扱えるように配列になっています。
    一個のときは file[0] を指定します。
    複数のファイルの扱いは File Copy を参照して下さい。
    読込完了時の処理は onload イベントハンドラに記述します。
    読み込んだテキストを reader.result で取得し、テキストエリアに書き出します。
    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.onload = function(ev)
        {   //テキストエリアに表示する
            document.test.txt.value = reader.result;
        }
    },false);
    
  3. ファイル選択で表示する TEXT FILE は "utf-8" または "utf-16" でタイプして下さい。
    "Shift-JIS" のときは readAsText() を次のように修正して下さい。
        //reader.readAsText(file[0]);
        reader.readAsText(file[0], "Shift-JIS");  
    
    第2引数を省略すると UTF-8 と解釈されます。
    "utf-16" のときは、ファイル先頭に識別コードが格納されているので、省略しても文字化けしないようです。
    文字コードの説明は Programing Guid を参照して下さい。
    jQuery Get で jQuery(ジェイクエリー)を使ったファイル入力を説明しています。
    File I-O で ActiveX を使ったファイルの入出力を説明しています。

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