ruby-on-rails - 希望在Rails上传时显示图片

我希望在上传图片时使用：hint以立即在表单中显示它。我只是发现了该函数，但由于出现错误，似乎没有正确使用它。
我正在寻找替换以下内容

<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>

在以下形式中，使用：hint

  <%= 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)

最佳答案

我建议您使用javascript / jquery帮助来做到这一点：

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]);
    }
  }

这段代码从您的输入获取图像并将其插入#your_preview_id元素内，但是，对于id，您需要执行以下操作：

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

将此ID赋予您的输入，为他绑定更改，然后执行以下操作：

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

不要忘记为图像预览创建一个着陆点：

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