Rails:CarrierWaveで画像のプレビュー機能を実装

以前、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時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。

参考:【Rails5】初心者へ勧める!実用的な画像投稿フォームの優しい作り方

シェアする

  • このエントリーをはてなブックマークに追加

フォローする