[JQuery] ファイル選択した画像を即時プレビュー表示する方法 +画像投稿gem追加

#完成イメージ

• 画像を選択する。
• 画像をDBに登録する前にプレビュー表示。
  プレビュー機能だけ見たい方は下ののJQueryを設定だけ読んでください

####環境
ruby 2.5.7
rails 5.2.4.3
jQueryを設定できるようにしてある。

##画像投稿用gem
今回は「Refile：リファイル」を使用します。Refileは、アプリケーション向けのファイル・アップロードのライブラリです。
Refileには、以下のような特徴があります。

・画像を簡単に組み込むことができる。
・サムネイルを生成できる。
・ファイルのアップロード先を設定できる。

さらに今回は、サイズ調整など画像加工を行うgem（MiniMagick）も追加もしています。

Gemfile

...
 
# 画像投稿用gem
gem "refile", require: "refile/rails", github: 'manfe/refile'
# 画像加工用（サイズ調整など）gem
gem "refile-mini_magick"

gemを追加したときは、bundle installコマンドを実行しましょう。

##画像用のカラムを追加しましょう！
画像を保存するためのカラムを追加します。
カラム名は、「image_id」のようにidを付けて設定します。（データ型はstringです）
以下のコマンドで、データーベースに反映しましょう

$ rails db:migrate

##attachmentメソッドを追加する
Refileを使うには、attachmentメソッドをモデルに追加する必要があります。
attachment（アタッチメント）メソッドとは、refileが指定のカラムにアクセスするために必要です。これによりDBに存在する画像を取得したりアップロードが可能となります。
カラム名はimage_idですが、ここでは_idをつけません。

モデルに記述しましょう

attachment :image

##Strong Parametersに追加する
imageを追加してください。

private の下に
def 任意の名前
params.require(:モデル名).permit(:カラム名)
end
今回はカラム名に image　が入ります

##ビューファイル設定

new.html.rb

 <%= form_for(モデル,url:　url又はpathが入ります) do |f| %>

      <div class="item-image">
        <%= attachment_image_tag from_forで使用しているモデルが入ります, :image, class: "img-square", fallback: "no_image.jpg", size:"300x300" %>
      </div>

      <%= f.attachment_field :image, placeholder: "画像" %>
    </div>
　　<%= f.submit "登録"%>

##JQueryを設定
・今回はnew.htmlの下にで書いて行きたいと思います。(ブレビューしたいhtmlに書いていただければ大丈夫です）
・app/assets/javascripts/application.jsに記述してもらってもできます。
その場合はscriptタグは消してください。
・＄('#item_image')　$(".image")は対応するid　か　class名に変えてください
・＄('#item_image')はファイルを選択のid、を$(".image")は画像が表示される部分のclass名かid名

new.html.erb

<%= form_for(モデル,url:　url又はpathが入ります) do |f| %>

      <div class="item-image">
        <%= attachment_image_tag from_forで使用しているモデルが入ります, :image, class: "img-square", fallback: "no_image.jpg", size:"300x300" %>
      </div>

      <%= f.attachment_field :image, placeholder: "画像" %>
    </div>
　　<%= f.submit "登録"%>

---------ここから下追加--------------------------------------

<script>
$(function(){
    // inputのidから情報の取得
    $('#item_image').on('change', function (e) {
// ここから既存の画像のurlの取得
    var reader = new FileReader();
    reader.onload = function (e) {
        $(".image").attr('src', e.target.result);
    }
// ここまで
    reader.readAsDataURL(e.target.files[0]); //取得したurlにアップロード画像のurlを挿入
});
});

</script>

ファイル選択のinputタグ内のidを指定、ファイル選択をクリックすると動作をする
$('#item_image').on('change', function (e) {

現在表示しているプレビュー画像のimgタグのclass指定、imgタグ内のscrをアップロード予定の画像に置き換える。
var reader = new FileReader();
reader.onload = function (e) {
$(".image").attr('src', e.target.result);
}
reader.readAsDataURL(e.target.files[0]);

###用語
FileReader： オブジェクトを使うと、ユーザーのコンピューター内にあるファイル (もしくはバッファ上の生データ) をウェブアプリケーションから非同期的に読み込むことが出来ます。

attr：　キーと値の組み合わせからなるハッシュオブジェクトを引数に渡し、全ての要素に複数の属性を同時に設定する。