目標

jQueryを使用して、選択した画像を動的に変化させて、どの画像をアップロードするのかわかりやすくします。

HTML

<!doctype html>
<head>
     //使用するjQueryを定義
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
・・・
<form action={{route('hogehoge')}} method="post" enctype="multipart/form-data">
     //imgタグを設定(/image/Noimage.jpgのところは、publicディレクトリの配下の構成に応じて適当に変更してください。)
     <img id="img_prv" src="{{ asset('/image/Noimage.jpg') }}">
     //画像ファイルを選択するinputタグを設定
     <input id="img_upload" type="file" accept="image/*" name="image">
</form>

jQuery

<script>
        //画像が選択される度に、この中の処理が走る
        $('#img_upload').on('change', function (ev) {

            //コンソールタブで適切に処理が動いているか確認
            console.log("image is changed");

            //このFileReaderが画像を読み込む上で大切
            const reader = new FileReader();
            //--ファイル名を取得
            const fileName = ev.target.files[0].name;

            //--画像が読み込まれた時の動作を記述
            reader.onload = function (ev) {
                $('#img_prv').attr('src', ev.target.result).css('width', '150px').css('height', '150px');
            }
            reader.readAsDataURL(this.files[0]);
        })
</script>

これで、画像ファイルをアップロードするたびに、画像が動的に切り替わるはずです。
是非試してみてください。

最後に

不明点、質問などあれば、コメント欄にお願い致します。

もっと良い方法や、FileReaderの詳しい解説などあれば、是非教えていただきたいです。