FileReader

FileReader はファイルの読み込みを行うオブジェクトです。

プロパティー

  • readyState: 右の3種類の状態のいずれかを表します (EMPTY, LOADING, DONE)
  • result: 読み込まれたファイルのコンテンツを表します (DOMString)
  • error: エラー情報を表します (FileError)
  • onloadstart: 読み込み開始時に呼ばれる関数を表します (Function)
  • onprogress: 読込中に呼ばれ、進捗状況を報告する関数を表します (progess.loaded/progress.total) (Function) - 現在サポートされていません
  • onload: 読み込みが成功したときに呼ばれる関数を表します (Function)
  • onabort: abort() メソッドを実行したときなど、 読み込みが強制終了したときに呼ばれる関数を表します (Function)
  • onerror: 読み込みが失敗したときに呼ばれる関数を表します (Function)
  • onloadend: 成功、失敗にかかわらずリクエストが完了した際に呼ばれる関数を表します (Function)

メソッド

  • abort: 読み込みを強制終了します
  • readAsDataURL: ファイルを読み込み、データを Base64 エンコードされたデータ URL で返します
  • readAsText: テキストファイルを読み込みます

詳細

FileReader オブジェクトはデバイスのファイルシステムからファイルを読み込む際に使用します。ファイルはテキストもしくは Base64 でエンコードされた文字列として読み込まれます。また、 loadstart, progress, load, loadend, error や abort などのイベントを受け取るための独自のイベントリスナーを登録することも出来ます。

サポートされているプラットフォーム

  • Android
  • BlackBerry WebWorks (OS 5.0 以上)
  • iOS
  • Windows Phone 7 (Mango)

データ URL として読み込む場合

パラメーター:

  • file - 読み込むファイルのフルパスを表します

使用例

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("読み込み成功");
        console.log(evt.target.result);
    };
    reader.readAsDataURL(file);
};

var fail = function(evt) {
    console.log(error.code);
};

entry.file(win, fail);

テキストとして読み込む場合

パラメーター:

  • file - 読み込むファイルのフルパスを表します
  • encoding - ファイルのコンテンツのエンコードを表します (デフォルト: UTF-8)

使用例

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("読み込み成功");
        console.log(evt.target.result);
    };
    reader.readAsText(file);
};

var fail = function(evt) {
    console.log(error.code);
};

entry.file(win, fail);

Abort の例

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("読み込み成功");
        console.log(evt.target.result);
    };
    reader.readAsText(file);
    reader.abort();
};

function fail(error) {
    console.log(error.code);
}

entry.file(win, fail);

詳細な使用例

<!DOCTYPE html>
<html>
  <head>
    <title>FileReader の使用例</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Cordova の読み込み完了まで待機
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Cordova 準備完了
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("データ URL として読み込み");
            console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("テキストとして読み込み");
            console.log(evt.target.result);
        };
        reader.readAsText(file);
    }

    function fail(evt) {
        console.log(evt.target.error.code);
    }

    </script>
  </head>
  <body>
    <h1>使用例</h1>
    <p>ファイルを読み込みます。</p>
  </body>
</html>

iOS に関する注意点

  • encoding パラメーターはサポートされておらず、常に UTF-8 エンコーディングが使われます。