画像や音声ファイルの内容を表示または再生するには？
解説
DataURL形式（RFC2397で定義されているdata URLスキーム）は画像や音声データをURL文字列に直接埋め込んだもので、audio要素やimg要素で利用可能です。（対応するファイル形式はブラウザのimg要素やaudio要素の実装によって異なります）
以下の例では、FileReaderオブジェクトのメソッド「readAsDataURL(file)」を利用して読み込んだデータ（自分自身のresult属性に格納される）を画像ファイルとして表示しています。
// imgは画像を表示するimg要素、fは取得したFileオブジェクト
var reader = new FileReader();
reader.onload = function(){
// 非同期読み込みでは結果はFileReaderオブジェクトのresult属性に格納される
img.src = reader.result;
}
reader.readAsDataURL(f);
読み込みメソッドが「readAsDataURL(file)」である点と、結果をimg要素のsrc属性に設定している点が、テキスト形式での読み込みとの違いです。
img要素はsrc属性にDataURL形式の文字列が設定されると、画像へとデコードして画面に表示します。これはaudio要素で音声ファイルを再生する場合も同じです。
この方法を利用すると、サーバーへの送信前の画像ファイルのプレビューや、ローカルで動作するウェブアプリケーションでの、ユーザーのファイルの再生などを簡単に実装することができます。
関連項目
