Laravel 画像のプレビュー表示

概要

前回（Laravel UI登録画面で画像保存処理を実装）からの続きです。画像を選んだときにプレビューを表示させる機能です。

目次

1. コントローラーの編集
2. 登録画面（View）の編集
3. JS読み込み部分の追記
4. javascriptをViewに追記

コントローラーの編集

strage/app/public/imgにprofile.jpgを保存して、コントローラーで画像が保存されなかったらprofile.jpgを保存するようにさせる。

RegisterController.php

protected function create(array $data)
    {
        if (isset($data['icon_image_path'])) {
            $icon_image_path = $data['icon_image_path']->store('img', 'public');
        } else {
            $icon_image_path = "img/profile.jpg"; // nullからimg/profile.jpgに変更
        }

登録画面（View）の編集

register.blade.php

<form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
                        @csrf
                        {{-- アイコン画像プレビュー表示 --}}
                        <div class="text-center">
                            <img id="icon_img_prv" class="img-thumbnail h-25 w-25 mb-3"
                                src="{{ asset('/storage/img/profile.jpg') }}">
                        </div>
                        {{-- アイコン画像 --}}
                        <div class="row mb-3">
                            <label for="icon" class="col-md-4 col-form-label text-md-end">{{ __('アイコン') }}</label>
                            <div class="col-md-6">
                                <input id="icon" type="file" class="form-control" accept="image/*"
                                    name="icon_image_path" onchange="setImage">
                            </div>
                        </div>

JS読み込み部分の追記

〜3.3.1.min.jsをJS記載部分に追加する。

layouts/app.blade.php

<!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

javascriptをViewに追記

register.blade.php

<script>
    // アイコン画像プレビュー処理
    // 画像が選択される度に、この中の処理が走る
    $('#icon').on('change', function (ev) {
        // このFileReaderが画像を読み込む上で大切
        const reader = new FileReader();
        // ファイル名を取得
        const fileName = ev.target.files[0].name;
        // 画像が読み込まれた時の動作を記述
        reader.onload = function (ev) {
            $('#icon_img_prv').attr('src', ev.target.result).css('width', '150px').css('height', '150px');
        }
        reader.readAsDataURL(this.files[0]);
    })
</script>

今回はこれで以上です。画像ファイルを選択したときにプレビューが表示されます。