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

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

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

では、これも簡単なサンプルをあげましょう。まず、HTMLファイル側に、以下のようなタグを追記しておいてください。

<img id="img1" src=""
    style="width:200px;height:150px;">

この<img>タグに、ファイルを読み込んでイメージを表示させてみましょう。

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

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

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

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

(by. SYODA-Tuyano.)

※リストが表示されない場合

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;
}