File API (HTML5)でローカルファイルにアクセスする

• ファイルを選択する

以下のHTMLを表示すると、ファイルを選択する｢ボタン｣が表示される。(表示はブラウザにより異なり、｢ファイルを選択｣｢参照｣などとなる。)
multiple属性を指定することで、複数のファイルを選択可。

<input id="xgpsview01FileName" type="file" name="xgpsview01FileName" />

 

• ファイル名を取得する

 

ファイル名は、以下で取得することができる。(配列になっているので、複数ファイルのケースでは[1][2]…で取得する。)

 document.getElementById('xgpsview01FileName').files[0]

イベントハンドラを利用すると以下のとおり。

$('#xgpsview01FileName').live('change', handleFileSelect);

function handleFileSelect(evt){
    var f = evt.target.files[0];
    gFileNameGpsOrg = escape(f.name);
}

 

• ファイルの情報を取得する

 

ファイル名以外に種類やサイズなどが取得可能。

function handleFileSelect(evt){
    var f = evt.target.files[0];
    gFileNameGpsOrg = escape(f.name);
    var str = 'filename:' + escape(f.name) + '  [' + (f.type || 'n/a') + '] - ' + f.size + 'bytes'; //+ ' update:' + f.lastModifiedDate;
    $('#xgpsview01FileInfo').html(str);
    var reader = new FileReader();//
    reader.onload = loaded;
    reader.onerror = loadedError;
    reader.readAsText(f);
}

 

• テキストファイルを読み込む

 

FileReaderオブジェクトのインスタンスを生成し、readAsText()メソッドで読み込む。ファイルのオープン・クローズは不要。また、非同期で処理されるため、読み込み後の処理はイベントハンドラとして記述する。

function handleFileSelect(evt){
    var f = evt.target.files[0];

    var reader = new FileReader();//
    reader.onload = loaded; // 読み込み完了後の処理を指定
    reader.onerror = loadedError; // 読み込み失敗時の処理を指定
    reader.readAsText(f); // ファイル名を指定してテキストファイルを読み込む
}

上記の例では、loaded(),loadedError()を定義する。

 

• ファイルの内容を取り出す

 

イベントハンドラに渡されるEventオブジェクトのインスタンス event.target.result　プロパティに入っている。

function loadedError(event){
    alert('error.');
}
function loaded(event){
    //$('#xgpsview01FileContents').html(event.target.result); // ファイル内容をそのまま表示
    var res = event.target.result;
    d = res.split('\n'); // 1行ごとに分割する。
    console.log(d.length);
}