如何使用Paperclip立即显示上传图像的缩略图？

Question

因此,在我的应用中,用户可以将图像上传到他们的博客.现在,当他们选择文件时,我想立即显示上传图像的缩略图,以便他们知道在按下表单上的"提交"之前他们选择了哪个图像.

我怎么能这样做？

这是我目前的代码:

  <hr>
  <h4>Name your blog<br />
  & upload an image for it</h4><br />


  <%= f.text_field :name, class: "blog-name", placeholder: "Name it here" %><br />
  <%= f.file_field :image %>
  ----> I'd like to show the image here, instantly <----
  <%= f.submit "Next", class: "next-button" %>
  <br><br>
  </div>
  <% end %>

Answer 1

回形针无法立即显示图像预览.Paperclip是Ruby on Rails ActiveRecord的一个插件,它允许文件像任何其他属性一样工作.没有额外的数据库表,只有一个库可以安装用于图像处理,并且可以像引用其他属性一样轻松地引用文件.

您可以使用javascript/jQuery实现即时图像预览.以下是显示图像预览的代码.

JSFiddle演示.

HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

JS:

function readURL(input) {

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

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

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

$("#imgInp").change(function(){
    readURL(this);
});