[Javascript] type=fileで画像を選択した際に、プレビュー表示をするサンプル

cms-265133_1280
LINEで送る
Share on GREE
Share on LinkedIn

WEBページがインタラクティブ対応して当たり前のようになった機能が多いのですが、アップロードする画像を事前にプレビュー表示するなんて機能は、Web2.0やHTML5ともてはやされるようになってきてからのブラウザのFileAPI機能が発達したおかげでしょう。
そもそも、WEBサービスを作るときには、こうしたWebAPI機能を駆使して見栄えも操作性も直感的にする必要があります。
動画も、3Dも、スマホセンサーアクセスなども、HTMLから操作できるようになっているので、もはやスマホのネイティブアプリではなく、
HTML5の方が開発工程などにおいてももてはやされているという噂もチラホラ聞くようになりました。
今回は、というファイルアップローダを作った時に、画像であれば、プレビューしてくれる機能がとても使う機会が多いので、
備忘録として、サンプルを載せておきたいと思います。

各種ソースコード

解説

htmlとcssの解説は省きます。
基本的にJS部分のみでいいと思いますんで。

JSの全体構成

少し拡大するプログラム構成を意識していますが、スニペットとして使いたい人は、
fileElm.onchange = $$.prototype.fileEvent;
の部分は、type=fileのエレメントで、ファイルを選択した時に、onchangeイベントが発火するので、その関数をしていしています。
そして肝心なのが、$$.prototype.fileEvent関数という事。

multipleの場合の対応

type=fileでは複数ファイルの選択もできますが、今回はあえて行なっていません。
そして、エレメントの項目が消された時は処理を除外するため、下記1行を入れています。

FileAPIのセット

上記が基本構成で、fileAPIのclassを定義したfileReaderが指定された画像がブラウザに読み込まれたタイミングを計るためにonloadイベントをセットしてます。
そしてその後にreadAsDataURLで指定された画像をセットしているという内容です。

onload内処理

今回は、画像を表示するエリアをdivで事前に用意して、その中を毎回一度空にしてから、imgエレメントを作成してappendChildしています。

ちなみに、見ればわかるのですが、画像の内部パスは「this.result」で取得できるので、まんまsrc属性にいれるだけでいいんですね。

今回はソースのみでサンプルページは容易していません。
何かのツールで使ったらまた掲載します。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*