フォームで画像選択時にプレビュー表示する【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が発火します。

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

※FileRenderについては、下記外部サイト様に詳しい解説がありましたのでご参照ください。
【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サービスには必須だけど案外作るのがめんどくさい」機能がいくつか存在するので、今後も紹介していきます。

コメント

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