【javaScript+jQuery】プレビュー画面の表示

フォームからファイル選択をした時に、画像のプレビューを表示するのを目にしたことがあるかと思いますが、簡単に実装できるプレビュー画面を紹介します。

実際の動き

論より証拠ということでどのような動きをするのか実際に動画で紹介します。

動作環境

プレビューを表示するに当たっては以下の環境での動作になります。

・html

・css

・javascript(jQuery)

htmlのコード

htmlには以下のコードを用意します。

ファイル選択の画面になりますので、inputタグのtypeのプロパティ値はfileと置きます。

4行目のid=”preview”を持つdivタグは、その名の通りこれがimgに置き換わります。

JavaScript+jQueryのコード

jQueryには以下のコードを用意します。

sample.js

1. 2行目でid=”input-file”を持つinputタグでファイルが選択された時が発動条件としています
2. 3行目では繰り返しプレビューを想定するので、imgタグを削除するコードを書きます
3. 選択された$(this)のinputタグの中のオブジェクトを取得します
4. 5行目ではFileReader()オブジェクトで非同期的にファイルを読み込み値をfileReaderに与えます
5. 6行目でイベントハンドラーを発生させます。7行目の$(‘#preview’)をhtmlメソッドで書き換えます
6. そのまま画像をプレビューさせるとサイズ違いで見栄えが悪くなるので8行目でクラスを追加します

sample.css

最後のfileReader.readAsDataURL(file);でデータ上のURLを読み込ませプレビューを表示することができます。

スクールを利用して本格的に学ぶ

いかがでしたでしょうか？

10人中9人が挫折すると言われるプログラミングを、ヒロヤンも実はプログラミングスクールで学習をしてきたからで、結果、今はPythonエンジニアとして働いています。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考え、結果挫折せずに今に至っています。

今なら無料でキャリアカウンセリングを行っているTechAcademyのようなプログラミングスクールもありますのでこれを機会に是非カウンセリングだけでも受けてみてはいかがでしょうか？

TechAcademyで無料のカウンセリング

上記リンク先から無料相談ができます。

またこちら(↓)ではPython専用のプログラミングスクールをまとめ紹介しています。