フォームでユーザー投稿の画像を即時プレビューする方法は?

# WEB制作

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で簡単]フォームに投稿画像プレビューをつける解説!

ソースにコメントアウトで説明をつけましたので、参考にしてみてください。

あるいは同じように組めばクラス名を変更しコピペしても動くと思いますので、もし時間がなく実装する必要がありましたらコピペで試してみてください。

コメントアウトで解説してみました。

わたしもすっきりすべてを理解できずに、ふんわりと理解しました。
ただやっていくうちに「あー、あの時やったやつに似てる」と思えれば、すこしづつでもスキルアップできそうですよね。

なのでもし理解できない場合でもコピペでもして動かしてみるといいかもしれません。
動かかないことが一番つまらないので!

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~