このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第41回

File APIでブラウザーからローカルファイルを操作

2010年10月05日 10時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

テキストファイルの内容を読み出す

 続いてファイルの内容を読み出してみましょう。最初に、テキストファイルの内容を読み出してブラウザー上に表示します。

 一般的にプログラムからファイルへアクセスするには以下の手順を採ります。

  1. ファイルを特定(ファイル名とパスを決定)
  2. ファイルをオープン
  3. ファイル内容に対して読み込みや書き込みの処理を実行する
  4. ファイルをクローズ

 これに対してFile APIは2のファイルオープン、4のファイルクローズの手続きが必要ありません。また、File APIはファイルの読み込み処理は同期でなく非同期で処理される点も異なります。

 ファイルデータはnew FileReader()としてFileReaderオブジェクト(インスタンス)を生成し、readAsText()メソッドで読み込みます。

 readAsText()メソッドの前にファイルの読み込みが完了したときの処理を記述します。ファイルが正常に読み込まれるとFileReaderオブジェクトでonloadイベントが発生するので、イベントハンドラに読み込みが完了したときの処理を設定します。イベントハンドラにはEventオブジェクトが渡され、読み込まれたファイルの内容がtarget.resultプロパティに入ります。


var reader = new FileReader();
reader.onload = function(evt){
    document.getElementById("result").innerHTML = evt.target.result;
}


 イベントハンドラの設定が終わったらreadAsText()メソッドでファイルを読み込みます。readAsText()の第1引数にはファイルオブジェクト、第2引数には読み込むファイルの文字コードを指定します。指定した文字コードとファイルで使用されている文字コードが異なると文字化けするので注意してください。


reader.readAsText(fileData, "utf-8");


 ここまでをまとめたのがサンプル3です。テキストファイル(文字コードはUTF-8)を選択するとファイルの内容が表示されます。

【図】10psd
ファイル選択ボタンをクリックする
【図】11.png
テキストファイルを選択する
【図】12.psd
「ファイル内容を表示」ボタンをクリックすると
【図】13.png
テキストファイルの内容が表示される。ファイルで使用されている文字コードとスクリプトで指定した文字コードが一致していないと文字化けする

サンプル3


<h1>テキストファイルの内容を表示する</h1>
<form action="./test.cgi" method="get">
    <input type="file" id="myFile" />
    <input type="button" id="displayFileData" value="ファイル内容を表示" />
</form>
<div id="result"></div>
<script>
    document.getElementById("displayFileData").addEventListener("click", function(){
        var fileData = document.getElementById("myFile").files[0];
        if (fileData.type != "text/plain"){
            document.getElementById("result").innerHTML = "プレーンテキストを選択してください";
            return;
        }
        var reader = new FileReader();
        reader.onload = function(evt){
            document.getElementById("result").innerHTML = evt.target.result;    // 内容をページ上に表示
        }
        reader.readAsText(fileData, "utf-8"); // 文字コードをUTF-8として読み込む
    }, true);
</script>


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く