libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

File APIによるファイルアクセス (4/4)

作成:2010-12-02 10:24
更新:2010-12-02 10:24

■イメージファイルを読み込んで表示させる

FileReaderでは、テキスト以外のデータも扱うことができます。この場合、バイナリデータとして扱う方法と、URLスキームのデータとして扱う方法が用意されています。

ここでは、URLスキームデータを使ってみましょう。これは、バイナリデータなどをURLの形式でテキストして送受したりするのに用いられるものです。というとよくわからないかも知れませんが、要するに「このURLスキームのデータとしてやり取りすれば、HTMLでバイナリデータをやりとりできる」ということです。

では、これも簡単なサンプルをあげましょう。まず、HTMLファイル側に、以下のようなタグを追記しておいてください。
<img id="img1" src=""
    style="width:200px;height:150px;">
この<img>タグに、ファイルを読み込んでイメージを表示させてみましょう。

スクリプトは、先ほど作成したものを再利用します。readfileloaded関数を、以下のリストのように書き換えてください。これで完成です。イメージファイル(JPEGファイルなど)を選択してみてください。<img>タグに、そのイメージが表示されますよ。

ここでは、ファイルの読み込みに「readAsDataURL」というメソッドを使っています。これが、URLスキームのデータとしてバイナリファイルの中身を読み込むためのメソッドです。使い方は簡単で、引数に読み込むFileを指定するだけです。

onloadイベント側では、event.target.resultで読み込んだデータを取り出し、それを<img>src属性に設定しています。やっていることは、これだけ。特にデータをあれこれ操作することもありません。

実をいえば、HTML5では、<img>が拡張されており、srcには表示イメージのURLだけでなく、URLスキームのイメージデータを直接設定することもできるようになっているのです。このため、読み込んだデータをsrcに指定するだけでイメージが表示できた、というわけです。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

function readfile(file) {
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = loaded;
	reader.onerror = error;
}

function loaded(event) {
	var str = event.target.result;
	document.getElementById("img1").src = str;
}

※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る