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

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 无法立即显示图像预览。 Paperclip 是 Ruby on Rails ActiveRecord 的一个插件，它可以让文件像任何其他属性一样简单地工作。没有额外的数据库表，只需安装一个用于图像处理的库，并且能够像引用其他属性一样轻松地引用文件。

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

JSFiddle Demo。

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