<DAY184>画像のプレビュー表示

●8/24(土)
●学習日数 184日
●学習時間(本日)3時間
●累計学習時間 804.0時間
●一日あたりの平均学習時間 4.37時間

何ができるか？

file filedにクリックされた画像を表示する事ができる。

前提

railsでjqueryが使える状態である事

手順１

viewのにセレクタの設定をする。
ここでのポイントは画像をhtmlで表示する方法を理解している事。

(1)クリックする部分（着火確認で必要）
(2)表示する部分

.from__boxs
      = form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
        .from-boxs__box__titles__require 必須
        .from__boxs__field
          = f.text_field :name,placeholder:"ニックネーム",class:"from__boxs__field"
        .from-boxs__box__titles__require 必須
        .from__boxs__field
          = f.email_field :email, autofocus: true, autocomplete: "email",placeholder:"email",class:"from__boxs__field"
        .from-boxs__box__titles__require 必須
        .from__boxs__field
          = f.password_field :password, autocomplete: "current-password",placeholder:"password",class:"from__boxs__field"
        .from-boxs__box__titles__require 必須
        .from__boxs__field
          = f.password_field :password_confirmation, autocomplete: "new-password",class:"from__boxs__field",placeholder:"もう一度パスワードを入力してください"
        .from-boxs__box__titles__require 必須
        .from__boxs__field
          = f.password_field :current_password, autocomplete: "current-password",class:"from__boxs__field",placeholder:"古いパスワードを入力してください"
        .from-boxs__box__titles__any 任意
        .from__boxs__field
          = f.file_field :image,class:"from__boxs__field",id: :book_img　＃ここに追加(1)
          .image-box　＃divタグも箱で追加している
            %img#img_prev{src:""}/　＃ここに追加（2）
        .from__boxs__buttom
          = f.submit "送信",class:"from__boxs__buttom"

手順2

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]);
    }
  }
  $("#book_img").change(function(){
    readURL(this);
  });
 });