FIle APIで端末内の画像をブラウザに表示する
HTML5のFile APIを使うと、画像ファイルをサーバにアップロードしなくてもブラウザで表示できちゃうよ、って話。
このAPIを使わない場合、端末からサーバのどこかに画像をアップして、その画像を端末にダウンロードすることでブラウザで表示する、なんて面倒な手順を踏むことになります。便利な世の中になったものです。
さて、File APIというからにはファイル情報を扱う専用のオブジェクトがあるわけです。File APIのオブジェクトは3つあります。
File…メタデータを扱うFileオブジェクト
FileList…Fileオブジェクトを格納する配列
FileReader…ファイル情報を読むためのオブジェクト。いくつかメソッドやイベントハンドラでファイルを扱える。
これらを使ってinput要素で選んだファイルを所定のdiv要素内に表示させてみます。
See the Pen File APIで画像読み込み by Fuminori Mori (@moonglows76) on CodePen.
解説をいろいろ入れたんで複雑に見えるかもですが、シンプルなスクリプトです。
このスクリプトを使えば、画像をサーバに送る前に中身を確認することができます。 Fileオブジェクト内にはファイル名、ファイルサイズ、最終更新日という情報も入っているので一緒に表示することもできます。
File APIはIEは10以上で使えます。古いsafariと古いandroidの標準ブラウザはFile Readerが使えないかも。
出典： Use the HTML5 File API to Work with Files Locally in the Browser
参考： Can I use file ?