目標
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の詳しい解説などあれば、是非教えていただきたいです。