File APIによるファイルアクセス (4/4)
作成:2010-12-02 10:24
更新:2010-12-02 10:24
更新:2010-12-02 10:24
■イメージファイルを読み込んで表示させる
FileReaderでは、テキスト以外のデータも扱うことができます。この場合、バイナリデータとして扱う方法と、URLスキームのデータとして扱う方法が用意されています。
ここでは、URLスキームデータを使ってみましょう。これは、バイナリデータなどをURLの形式でテキストして送受したりするのに用いられるものです。というとよくわからないかも知れませんが、要するに「このURLスキームのデータとしてやり取りすれば、HTMLでバイナリデータをやりとりできる」ということです。
では、これも簡単なサンプルをあげましょう。まず、HTMLファイル側に、以下のようなタグを追記しておいてください。
スクリプトは、先ほど作成したものを再利用します。readfileとloaded関数を、以下のリストのように書き換えてください。これで完成です。イメージファイル(JPEGファイルなど)を選択してみてください。<img>タグに、そのイメージが表示されますよ。
ここでは、ファイルの読み込みに「readAsDataURL」というメソッドを使っています。これが、URLスキームのデータとしてバイナリファイルの中身を読み込むためのメソッドです。使い方は簡単で、引数に読み込むFileを指定するだけです。
onloadイベント側では、event.target.resultで読み込んだデータを取り出し、それを<img>のsrc属性に設定しています。やっていることは、これだけ。特にデータをあれこれ操作することもありません。
実をいえば、HTML5では、<img>が拡張されており、srcには表示イメージのURLだけでなく、URLスキームのイメージデータを直接設定することもできるようになっているのです。このため、読み込んだデータをsrcに指定するだけでイメージが表示できた、というわけです。
ここでは、URLスキームデータを使ってみましょう。これは、バイナリデータなどをURLの形式でテキストして送受したりするのに用いられるものです。というとよくわからないかも知れませんが、要するに「このURLスキームのデータとしてやり取りすれば、HTMLでバイナリデータをやりとりできる」ということです。
では、これも簡単なサンプルをあげましょう。まず、HTMLファイル側に、以下のようなタグを追記しておいてください。
<img id="img1" src=""この<img>タグに、ファイルを読み込んでイメージを表示させてみましょう。
style="width:200px;height:150px;">
スクリプトは、先ほど作成したものを再利用します。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; }
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る