Question

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

我该怎么做？

这是我目前的代码：

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

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

1 个答案: