

画像プレビュー時に、既存画像の横に、新規プレビュー画像が出ます。  
既存画像と入れ替えるように、表示させるにはどうしたら良いでしょうか？  
よろしくお願い致します。

[code]

    <div class="field">
      <%= image_tag @user.picture.url if @user.picture? %>
      <%= f.label :picture, '画像' %>
      <%= f.hidden_field :picture_cache %>
      <img id="img_prev" width=200 height=200 src="#" class="img-thumbnail  hidden"/>
      <%= f.file_field :picture, :id => 'post_post_img' %>
    
      <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]);
            }
          }
          $("#post_post_img").change(function() {
            $('#img_prev').removeClass('hidden');
            readURL(this);
          });
        });
      </script>
    </div>
    
[/code]


CC BY-SA 3.0
2016-11-15T02:26:42.287
30407
2023-08-24T06:05:55.723
2017-09-17T07:02:03.073
13444
19086
question
javascript ruby-on-rails
rails で 画像アップロードの前に既存画像と入れ替えてプレビューしたい


既存画像を表示するimage_tagにidを付与して、ファイルの選択時にそのDOMのsrcを変更するという方法ではどうですか？（以下は例です）

[code]

    <div class="field">
      <%= image_tag @user.picture.url, id: "img_prev" if @user.picture? %>
      <%= f.label :picture, '画像' %>
      <%= f.hidden_field :picture_cache %>
      <%= f.file_field :picture, :id => 'post_post_img' %>
    
      <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]);
            }
          }
          $("#post_post_img").change(function() {
            readURL(this);
          });
        });
      </script>
    </div>
    
[/code]


CC BY-SA 3.0
2017-09-17T03:47:12.453
37999
2017-09-17T03:47:12.453
13444
30407
answer