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

So in my app, users can upload an image to their blog. Now right when they choose the file I'd like to instantly show a thumbnail of the uploaded image so they know which image they've selected before pressing "Submit" on the form.

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

How might I do this?

我怎么能这样做？

here's my current code:

这是我目前的代码：

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

1 个解决方案

#1

Paperclip cannot show image preview instantly. Paperclip is a plugin for Ruby on Rails ActiveRecord that lets files work as simply as any other attributes do. There are no extra database tables, only one library to install for image processing, and the ease of being able to refer to your files as easily as you refer to your other attributes.

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

You can achieve instant image preview using javascript/jQuery. Below is the code for showing image preview.

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

JSFiddle Demo.

JSFiddle演示。

Html:

HTML：

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

JS:

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

#1