Home>

In a form like this,

As an image, I want to display a preview when an image is selected like this.

The description below is the form part of the images column of the Blog model.
Since it is a json type, there are 3 forms.
Until now, it was possible to write such a description for one image preview,
I implemented it for the first time with the json type, but it does not work,
It can be realized by modifying where and how

      
        <i></i>
        <%= f.label :images %>
        <p>Up to 3</p>
        <%= f.file_field :images, multiple: true, id: :blog_images_1 %>
        <%= f.file_field :images, multiple: true, id: :blog_images_2 %>
        <%= f.file_field :images, multiple: true, id: :blog_images_3 %>
          
          
          
      
// image preview
  $('.blog_images_hidden_1').hide();
  $('#blog_images_1').on('change', function (e) {
      var reader = new FileReader();
      $('.blog_images_hidden_1').fadeIn();
      reader.onload = function (e) {
          $("#blog_image_prev_1").attr('src', e.target.result);
      }
      reader.readAsDataURL(e.target.files[0]);
  });
  $('.blog_images_hidden_2').hide();
  $('#blog_images_2').on('change', function (e) {
      var reader = new FileReader();
      $('.blog_images_hidden_2').fadeIn();
      reader.onload = function (e) {
          $("#blog_image_prev_2").attr('src', e.target.result);
      }
      reader.readAsDataURL(e.target.files[1]);
  });
  $('.blog_images_hidden_3').hide();
  $('#blog_images_3').on('change', function (e) {
      var reader = new FileReader();
      $('.blog_images_hidden_3').fadeIn();
      reader.onload = function (e) {
          $("#blog_image_prev_3").attr('src', e.target.result);
      }
      reader.readAsDataURL(e.target.files[2]);
  });