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

Question

Basically, what I want to accomplish is to allow user to preview their uploaded image before they submit it.

In the controller, i have

def index
    @temp = Temp.new
end

Since @temp is not saved, can I still use the solution from Rails: Paperclip & previews . If not, can I run javascript or something to run some ruby code?

This is my html:

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

 = form.file_field :image

= image_tag @temp.image.url

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

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

Answer 1

If I understand you correctly you want to preview an image before it is actually uploaded, right? You can do so by using some javascript.

By setting the width and height attributes of the image tag you can simulate a thumbnail.

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

and the html:

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

you can check it out on code pen

Answer 2

this worked in my case:

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

Answer 3

No need for jQuery. You can do the same thing in modern 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);
});