如何在 ruby​​ on Rails 中使用回形针立即预览上传的图像

基本上，我想要完成的是允许用户在提交之前预览上传的图像。

在控制器中，我有

def index
    @temp = Temp.new
end

由于@temp未保存，我仍然可以使用解决方案吗Rails：回形针和预览 https://stackoverflow.com/questions/2232008/rails-paperclip-previews。如果没有，我可以运行 javascript 或其他东西来运行一些 ruby​​ 代码吗？

这是我的html：

= form_for @temp, :url => temp_path, :html => { :multipart => true } 做 |form|

   = form.file_field :image

= image_tag @temp.image.url

= image_tag @temp.image.url(:medium)

= image_tag @temp.image.url(:thumb)

如果我理解正确的话，您想在实际上传图像之前预览图像，对吧？您可以使用一些 JavaScript 来做到这一点。

通过设置图像标签的宽度和高度属性，您可以模拟缩略图。

$(function() {
  $('#pictureInput').on('change', function(event) {
    var files = event.target.files;
    var image = files[0]
    var reader = new FileReader();
    reader.onload = function(file) {
      var img = new Image();
      console.log(file);
      img.src = file.target.result;
      $('#target').html(img);
    }
    reader.readAsDataURL(image);
    console.log(files);
  });
});

和html：

<form>
  <input type="file" id="pictureInput"> 
</form>
<div id="target">
</div>

你可以在上面查看code pen http://codepen.io/TimKaechele/pen/zFkuL?editors=101