JavaScriptでローカルファイルを自在に操る - File API
TIPS 054:テキストファイルを読み込む
File APIでは、ファイルのメタ情報を取得するばかりではありません。ファイルの内容を読み込み、JavaScriptのコードの中で利用することもできます。
例えば以下は、<input type="file">要素で指定されたテキストファイルを読み込み、ページ上に表示する例です。
[リスト02]テキストファイルの内容を表示(readText.html)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> window.addEventListener('DOMContentLoaded', function() { // ファイルが指定されたタイミングで、その内容を表示 document.querySelector("#file").addEventListener('change', function(e) { // File APIを利用できるかをチェック if (window.File) { // 指定されたファイルを取得 var input = document.querySelector('#file').files[0]; // ファイル読み込みの準備(1) var reader = new FileReader(); // ファイルの読み込みに成功したら、その内容を<div id="result">に反映(2) reader.addEventListener('load', function(e) { var output = reader.result.replace(/(\n|\r)/g, '<br />'); document.querySelector("#result").innerHTML = output; }, true); // ファイルの内容をテキストとして取得(3) reader.readAsText(input, 'UTF-8'); } }, true); }); </script> </head> <body> ファイル: <input id="file" name="file" type="file" /> <hr /> <!--読み込み結果を反映する場所を用意--> <div id="result"></div> </body> </html>
ファイルを読み込むには、FileReaderというオブジェクトを利用します(1)。(2)ではファイルのロードが完了したloadイベントのタイミングで、ファイルの内容を取り出し、テキストを
要素に置き換えている点にも注目です。
ただし、(2)の段階ではイベントリスナーを定義しているだけで、まだファイルの読み込みそのものが実施されているわけではありません。ファイルの読み込みを実行しているのは、(3)のreadAsTextメソッドです。readAsTextメソッドは、引数に「読み込みファイル(Fileオブジェクト)」「文字コード」の順で指定します。文字コードがUTF-8の場合には、第2引数は省略しても構いません。
TIPS 055:バイナリファイルを読み込む
FileReaderオブジェクトを利用することで、テキストファイルとほぼ同じ要領で画像/音声などのバイナリファイルを読み込むこともできます。
例えば以下は、<input type="file">要素で指定された画像ファイルを読み込み、要素に反映する例です。
[リスト03]画像ファイルの内容を表示(readDataURL.html)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> window.addEventListener('DOMContentLoaded', function() { // ファイルが指定されたタイミングで、その内容を表示 document.querySelector("#file").addEventListener('change', function(e) { // File APIを利用できるかをチェック if (window.File) { // 指定されたファイルを取得 var input = document.querySelector('#file').files[0]; // ファイル読み込みの準備 var reader = new FileReader(); // ファイルの読み込みに成功したら、その内容を<img id="result">に反映 reader.addEventListener('load', function(e) { document.querySelector("#result").src = reader.result; }, true); // ファイルの内容をData URL形式で取得(1) reader.readAsDataURL(input); } }, true); }); </script> </head> <body> ファイル: <input id="file" name="file" type="file" /> <hr /> <!--読み込み結果を反映する場所を用意--> <img id="result" /> </body> </html>
画像ファイルを読み込むには、readAsTextメソッドの代わりにreadAsDataURLメソッドを利用します(1)。これによって、画像ファイルをData URL形式で取得できます。
Data URLとは、URLに直接データを埋め込むための表現で、以下のような形式で表せます。
data:[コンテンツタイプ][;base64],データ本体
Data URLを利用することで、画像や音声などのデータをいちいちファイルに落とし込むことなく、例えば以下のように要素や要素に直接埋め込めるようになります。
(2)のloadイベントリスナーでは、読み込んだ画像データ(reader.result)を、そのまま要素のsrc属性にセットしています。
JavaScriptでローカルファイルを自在に操る - File API
連載バックナンバー
Think ITメルマガ会員登録受付中
全文検索エンジンによるおすすめ記事
- デスクトップアプリライクな操作性を実現するドラッグ&ドロップAPI
- プラグインは要らない!音声/動画対応したHTML5- / 要素
- スマホアプリ開発にも便利な位置情報API- Geolocation API-
- HTML5のドラッグ&ドロップAPI、File API、Web Storage
- クッキーより便利になったブラウザ標準ストレージ- Web Storage
- HTML+JavaScriptだけでブラウザに図形描画- Canvas API-
- 「TAURI」で「丸アートお絵描き」アプリを作ろう
- HTML+JavaScriptだけでブラウザに図形描画(3)- Canvas API-
- サンプルのプログラムコード解説
- HTML+JavaScriptだけでブラウザに図形描画(2)- Canvas API-