BETA

laravel6.2+JS¦画像登録時にプレビューする&デザインした画像選択ボタンを使う

投稿日:2020-05-20
最終更新:2020-05-20

やりたいこと

・プロフィール画像などをアップロードする時にプレビューしたい
・画像選択ボタンを「ファイルを選択」から、画像やカスタムしたボタンにしたい

環境
・laravel 6.2
・php 7.2
・jQuery 3.2

①プロフィール画像などをアップロードする時にプレビューしたい

今回はno image画像をstorageに保存しておいて、
・画像未登録時はno image画像
・画像登録済みのときはDBから画像を表示
としています。(twitterみたいな感じ)
no image画像がない場合は1pxの画像データでもOKとのことです。

<img id="preview" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">  

参考にさせていただきました

 
🍬🍬🍬

blade側はこんな感じ

@if (!empty($file))  
    <img id="preview" src="data:image/{{$mimeType}};base64,{{$file}}">  
@else  
    <img id="preview" src="{{ asset('/storage/icon/profile_image.png') }}">  
@endif  
<input type="file" name="image" id="imageUpload" accept='image/*'>  

 
JS側はこんな感じ

<script type="text/javascript">  
$('#imageUpload').on('change', function (e) {  
    let reader = new FileReader();  
    reader.onload = function (e) {  
        $("#preview").attr('src', e.target.result)  
    }  
    reader.readAsDataURL(e.target.files[0]);  
});  
</script>  

②画像選択ボタンを「ファイルを選択」から、画像やカスタムしたボタンにしたい

inputボタンを非表示にする→ボタンにクリックイベント→発火したらファイル選択できるようにする...といった感じにしていきます。

blade側はこんな感じ

@if (!empty($file))  
    <img class="c-avatar__image" id="preview" src="data:image/{{$mimeType}};base64,{{$file}}">  
@else  
    <img class="c-avatar__image" id="preview" src="{{ asset('/storage/icon/profile_image.png') }}">  
@endif  
<input type="file" name="image" id="imageUpload" accept='image/*' style="display:none">  
<button class="p-profile__ed-button" id="imageUploadButton"><span class="p-profile__ed-button-text c-button--edit">写真を選択</span></button>  

デザインしたbuttonタグを足してidを足します。
JS側はこんな感じ

<script type="text/javascript">  
$('#imageUploadButton').click(function(){  
    $('#imageUpload').click();  
    return false;  
});  
</script>  

おわりに

実際に実装したときは画像の登録+他の項目もまとめて編集する画面だったのですが、formタグの中に実装したところ画像選択ボタンを押した時に全項目submitされてしまっていました(なぜ...)
②の実装をするとinputタグのみformタグの中に書いておけばいいので、submitされてしまう問題も無事解決できました💫

1回書いた記事が消えてしまったので駆け足ですが...今後もっとJavaScript身につけていけたらいいなと思います。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

メモしていきますφ('ᴗ'」)

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう