以前、CarrierWaveで画像を保存する方法を以前紹介しました。
今回は、CarrierWaveの画像のプレビュー機能を活用する方法をまとめます。
画像ファイルフィールドにidを追加
まずフォーム内の画像ファイルのフィールドにidを追加します。Javascriptで処理するときに使います。
<%= f.file_field :image id: :user_img %>
画像を表示させる枠を追加
次に、その下部などに画像を表示させる箇所を追記します。画像がある場合とない場合で表示を切り替えるようにします。ここにもidをセットしておき、あとでJavascript内で使います。
<% if @user.image.present? %> <%= image_tag @user.image, id: :img_prev %> <% else %> <%= image_tag "sample.jpg", id: :img_prev %> <% end %>
Javascriptでプレビュー機能を実装
更にその下部にJavascriptを追記します。
具体的には、下記のように画像ファイルフィールドの値が変化したとき（画像が登録されたとき）に、画像ファイルを読み込み、画像表示枠に反映させます。
<script type="text/javascript">
$(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#user_img").change(function(){
readURL(this);
});
});
</script>
入力フォームで画像を投稿する場合、プレビュー機能は便利なので、ぜひ使ってください。
Ruby on Railsをこれから本格的に勉強したい人は「エンジニアになるための600時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。