Нужно показать картинку при загрузке в рельсы

Question

Я хочу использовать: подсказка при загрузке картинки для немедленного ее отображения в форме.Я только что обнаружил функцию, но, похоже, неправильно ее использую, так как получаю сообщение об ошибке.Я искал для замены следующие

<div class="input-group " style="width: 100% !important;">
  <span class="input-group-btn">
    <span class="btn btn-small btn-primary btn-inverse" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
      <%= f.file_field :avatar, onchange: "$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\\\|/]/).pop());", style: "display: none;" %>
    </span>
    <span class="form-control"></span>
  </span>
 </div>

В следующей форме, используя: подсказка

  <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: {method: :put, multipart: true}) do |f| %>
     <%= f.error_notification %>
     <% if @user.avatar? %>
       <%= avatar_for(@user) %>
     <% else %>
       <%= image_tag("Avatar_default.jpg", alt: "No profile picture", width: "100%") %>
     <% end %>
     <br>
     <%=  f.input :avatar, :as => :file, :hint => image_tag(f.object.avatar.url) %>
     <%=  f.input :avatar_cache, :as => :hidden  %>
     <%= f.button :submit, "Update", :class => "btn btn-primary" %>
  <% end %>

В идеале я хотел бы иметь кнопку просмотра файла, выберите изображение, а затем увидетьпредварительный просмотр изображения, когда пользователь продолжает заполнять форму.

Я, конечно, не заполняю следующее право: image_tag(f.object.avatar.url)

Answer 1

Я рекомендую вам сделать это с помощью javascript / jquery help:

function showImage(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#your_preview_id')
          .attr('src', e.target.result)
          .width(150)
          .height(200);
      };

      reader.readAsDataURL(input.files[0]);
    }
  }

Этот код получает изображение из вашего ввода и вставляет его в элемент #you_preview_id, но, для идентификации, вынеобходимо сделать следующее:

<%= f.input :avatar, :as => :file, id: "image_upload_id" %>
<%= f.button :submit, "Update", :class => "btn btn-primary" %>

Предоставив этот идентификатор для ввода, связать изменения для него и сделать следующее:

$('#image_upload_id').on('change', function() {
    showImage(this);
})

Не забудьте пробел для вашегопредварительный просмотр изображения:

<div id="your_preview_id"></div>