フォームでユーザー投稿の画像を即時プレビューする方法は？
2020.03.01
今回はフォームに画像を投稿するときに、投稿した画像をプレビューとして即時反映させる方法について書いていきますので、ぜひ参考にしてみてください。
フォームでユーザー投稿の画像を即時プレビューする方法は？
まず何も設定しない場合は、
See the Pen
xxxzwpK by sank (@sank_f)
on CodePen.
こんな感じですよね。
投稿した画像のタイトルが表示される。
ただこれだとユーザーがどんな画像を選択したかが一目でわからないので不親切なフォームになってしまいました。
なので選択した画像をその場で確認できるようにしましょう。
そのためにはjQueryが必要になりますので、まずは完成形をーー、
See the Pen
OJJEyvj by sank (@sank_f)
on CodePen.
こんな感じになりました。
実際試してみください。
選択した画像がそれぞれ表示されているでしょうか。
これならばユーザーが間違えた画像を投稿するといったことも防げますよね。
ではソースとともに解説させていただきます。
［jQueryで簡単］フォームに投稿画像プレビューをつける解説！
ソースにコメントアウトで説明をつけましたので、参考にしてみてください。
あるいは同じように組めばクラス名を変更しコピペしても動くと思いますので、もし時間がなく実装する必要がありましたらコピペで試してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function () { $('input[type="file"]').change(function (e) { //ファイル送信を可能にする'input[type="file"]'の値が変化した時に発火 var file = e.target.files[0], //選択できるファイルを１つに設定 reader = new FileReader(), //FileReader（ユーザーのPC内にあるファイルやバッファ上の生データに対して、読み取りアクセスを行える）オブジェクトを生成する $preview = $(this).next(".preview"); //発火対象、直後の兄弟要素である'.preview'を'$preview'と定義する if (file.type.indexOf("image") < 0) { //もしファイルの中に'image'がない時は return false; //falseを返す } //つまり、画像ファイル以外の場合は何もしない reader.onload = (function (file) { //ファイル読み込みが完了した時に発火 return function (e) { $preview.empty(); //プレビューが既にある場合は削除 $preview.append($("<img />").attr({ //'.prevew'の領域の中にロードした画像を表示するimageタグを追加 src: e.target.result, class: "preview-act", title: file.name })); }; })(file); reader.readAsDataURL(file); //読み込みを実行する }); }); |
コメントアウトで解説してみました。
わたしもすっきりすべてを理解できずに、ふんわりと理解しました。
ただやっていくうちに「あー、あの時やったやつに似てる」と思えれば、すこしづつでもスキルアップできそうですよね。
なのでもし理解できない場合でもコピペでもして動かしてみるといいかもしれません。
動かかないことが一番つまらないので！
