如何使用回形针在ruby轨道上立即预览上传的图像-Java 学习之路

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

在控制器中，我有

def index
    @temp = Temp.new
end

由于未保存@temp，我仍然可以使用Rails: Paperclip & previews中的解决方案 . 如果没有，我可以运行javascript或其他东西来运行一些ruby代码吗？

这是我的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）

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

回复于 2024-05-06T21:43:00+08:00

如何使用回形针在ruby轨道上立即预览上传的图像

1 回答

相关问题