如何使用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 %>

- Sonny Black

Answer 1

Paperclip无法立即显示图像预览。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);
});

- Dave

---

这太棒了！不过我能这样做并将图像保存到服务器吗？如果我们可以将两者结合起来，那就万事大吉了。 - Sonny Black

这段代码只是显示文件字段中选择的图像。它不会影响您的表单字段和图像提交到服务器。像往常一样提交您的表单，它就可以工作了。 - Dave

最后一个问题，我如何在添加图片后仅显示缩略图？现在它会显示一个损坏的图像图标，直到我上传图片。 - Sonny Black

事实上，这只发生在Chrome浏览器上，在FireFox浏览器上ALT键似乎是正常工作的。有什么想法吗？ - Sonny Black

但我找到了解决方法，这里是答案http://jsfiddle.net/LvsYc/4669/。当图像标签的源为空时，它会显示损坏的图像图标.. 所以基本上给它分配一个默认图像.. 参考jsFiddle中的HTML。 - Dave