如何在 ruby on rails 中使用回形针即时预览上传的图像答案

【问题标题】：How to preview uploaded image instantly with paperclip in ruby on rails如何在 ruby on rails 中使用回形针即时预览上传的图像
【发布时间】：2014-10-17 22:04:46
【问题描述】：

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

在控制器中，我有

def index
    @temp = Temp.new
end

由于@temp 没有保存，我还可以使用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 ruby-on-rails ruby

【解决方案1】：

如果我理解正确，您想在实际上传之前预览图像，对吗？您可以通过使用一些 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查看它

【讨论】：

我真的很喜欢这个解决方案。非常轻巧，可以完成工作。感谢分享！
您能否解释一下如何将图像限制为缩略图大小？
我在代码笔中添加了一个注释部分。基本上你可以打电话给image.size，你会得到输入文件的字节大小

【解决方案2】：

这在我的情况下有效：

  $('.file-input').on 'change', (event) ->
    $('.image').attr('src', URL.createObjectURL(this.files[0]))

【讨论】：

【解决方案3】：

不需要 jQuery。你可以在现代 JS 中做同样的事情：

const selectElement = document.querySelector('#pictureInput');

selectElement.addEventListener('change', (event) => {
  let files = event.target.files;
  let image = files[0]
  let reader = new FileReader();
  reader.onload = function(file) {
    let img = new Image();
    console.log(file);
    img.src = file.target.result;
    let target = document.querySelector('#target')
    while (target.firstChild) {
      target.removeChild(target.firstChild);
    }
    document.querySelector('#target').appendChild(img)
  }
  reader.readAsDataURL(image);
  console.log(files);
});

【讨论】：