readAsDataURL()とIE10

ファイルをアップロードする際の画像確認として、選択した画像を一度ブラウザに表示する必要があるが、そのプレビューのために普通は一度ローカルからサーバー上にアップロードしなければいけない。

ここでreadAsDataURL()という便利なメソッドがある。この関数を使えば、ローカルのデータを表示することができる。加えてリロードの必要がなく、ページ推移なく動的に表示をしてくれるという、何ともお手軽なJSメソッドだ。

画像のアップロード一つでも、1から書くとなるとやたらプログラムを打ち込む必要がある。そこにセキュリティ対策やら例外対策やらを仕込まなければいけない。面倒な作業が、この関数を使えば一発解決。なんたってローカル参照だから、サーバーであーだこーだする必要がない。

しかし、対応ブラウザがとにかく少ない。まずIEがアウト。safariもアウト。スマホもアウト。便利なのにデフォルトのブラウザには全て対応していないという孤高のメソッドだった。対応していない理由は、たぶんセキュリティ面での配慮なのかもしれない。

ちなみに、IEでは次の10から対応するそうだ。いつの日か誰でも簡単に画像プレビュー出来る日が来るかもしれない。