フォームで画像選択時にプレビュー表示する【HTML・CSS・JQuery】

WEBサービスでフォームを作る際に、画像アップロード機能が必要になるケースがあります、

当然、画像のプレビュー機能も必要になるわけですが、これを実装するにはJavaScriptが必須となります。

今回は、そんな場合に使うコードについて解説していきます、

登録フォームを作ってるんですけど、

HTML・CSSだけだと画像のプレビューが作れません!

あーそれはJavaScript使わないと実装できないな

そうなんですね・・・

簡単に作れますか?

うん、そんなに難しくないよ!

デモ

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

使い方

①「ファイルを選択」をクリックして、画像を選択するとプレビュー表示されます
※このデモではサーバにアップロードする機能はありません。あくまで画面上に表示するだけです。

② 「削除」をクリックするとプレビューが削除されます。

コードについて解説

HTML

<!-- フォームで選択した画像を表示するimgタグ -->
<img id="img" accept="image/*" src="https://tool-engineer.work/wp-content/uploads/2022/06/default.png">

<div class="buttons">
    <!-- フォーム -->
    <input type="file" name="logo" id="form" accept=".jpg, .jpeg, .png, .gif">

    <!-- 画像削除ボタン -->
    <button type="button" id="delete">削除</button>
</div>

2行目:img id=”img” にプレビュー画像が表示されます。

6行目:input id=”form” は画像選択に利用しています。acceptで選択可能な画像ファイルの種類を指定しています。

CSS

imgの高さを指定しています。

JavaScript(JQuery)

①プレビュー表示設定

('#form').on('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#img").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
});

フォーム画像が変更された際に、JSが発火します。

FileReaderを利用して、imgタグに選択した画像を表示する仕組みです。

※FileReaderについては、下記外部サイト様に詳しい解説がありましたのでご参照ください。
【javascript】FileReaderを使って画像をプレビューする

②プレビュー削除

$('#delete').on('click', function (e) {
   //プレビュー表示をデフォルトに戻す
   $("#img").attr('src', 'https://tool-engineer.work/wp-content/uploads/2022/06/default.png');
   //フォームのvalueを初期化
   $("#form").val('');
});

削除ボタンクリック時に、以下を行います。

①プレビューを表示しているimgのsrcをデフォルト画像に戻す
②フォームのvalueを初期化

まとめ

画像をアップするフォームを作成する際には必須のプレビュー機能ですが、意外と作るのが大変です。

この他にも、「WEBサービスには必須だけど案外作るのがめんどくさい」機能がいくつか存在するので、今後も紹介していきます。

コメント

  1. xx より:

    FileRender
    じゃなくて
    FileReader

  2. 「画像アップロード機能についてご質問」

    デモのHTML,CSS,JSのソースをコピーしたのですが、
    JS部分がデモのようにならず、機能しませんでした。

    JSは、HTML内タグ内にと、外部スクリプトの.jsファイルを読み込む方法のどちらも試してみましたが、ダメでした。

    調べてみてもよくわからず、ご覧いただけていましたら解決方法やアドバイスいただけますと幸いです。

    • mule mule より:

      codepen上で問題なく稼働しておりますので、おそらくコード自体には問題が無いと思われます。
      エラーは発生していますか?
      具体的なエラーメッセージ等わかりましたら教えてください。

タイトルとURLをコピーしました