选择附件后显示图片预览，使用Paperclip。

Question

我想使用paperclip附加多张图片，并在提交表单之前显示任何已附加图像的预览。是否有人已经完成了这个任务，或者是否有人可以建议一些方法来实现这个目标？我知道需要使用jQuery和AJAX，但我不知道在提交表单之前如何查找已附加的图像。谢谢。

- rookieRailer

---

这可能对你有帮助： https://dev59.com/RHE95IYBdhLWcg3wm_Qu - socjopata

Answer 1

不幸的是，浏览器不支持使用XHR传递文件上传，因此您无法使用AJAX进行文件上传。我的建议是添加一个iframe（所有允许异步图像上传的gem /插件都会这样做），并为其添加unload事件。当文件输入更改时，将主表单的目标更改为iframe的名称，然后提交它，并等待该iframe的onload事件。

代码示例如下：

<iframe name="image_preview" id="image_preview" src="some_blank_page" onload="show_image_preview()"></iframe>

并且

function show_image_preview() {
  // read content here. Note: this function is also called when the some_blank_page is loaded!
  var data = window.image_preview.document;
  if (data && data.getElementById("preview")) {
    // now either do something with the preview or just place the iframe so it
    // is already positioned correctly
  }
}

function file_field_changed() {
  var form = $('..');
  var original_action form.action;
  form.action = "special_preview_path";
  form.target = "image_preview";
  form.submit();

  form.action = original_action;
}

请确保您的special_preview_path返回一个在iframe中的预览。

您还可以在onchange事件中创建iframe，并将其放置在每个文件输入字段下方。

我希望这很清楚！如果您需要更多关于此的信息，请告诉我。

- Rene van Lieshout

Answer 2

将一个图片标签包含在 class="target" 中

<div class="target">
  <img class="card_image" src="">
</div>

在你的js文件中添加以下监听器。

$(document).on('change', 'input[type="file"]' ,function(event) {
  var obj_custom = this;
  var files = event.target.files;
  var image = files[0]
  var reader = new FileReader();
  reader.onload = function(file) {
    var img = new Image();
    img.src = file.target.result;
    img.width=84;
    $(obj_custom).siblings('.target').html(img);
  }
  reader.readAsDataURL(image);
});

- Ankur Shukla

Answer 3

我遇到过这个问题好几次，最终想出了一个（有点）简单的解决方案。我不敢说这段代码完美无缺，但它确实能够工作。

edit.html.erb

<%= image_tag "ajax-loader.gif", class: "ajax-loader" %>

<div class="image_preview">
  <% if resource.picture.url %>
    <%= image_tag resource.picture.url %>
  <% end %>
</div>

<iframe id="upload_target" name="upload_target" style="display: none" onLoad="onload_test()"></iframe>

registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController
  def upload_image_preview
    # sleep 3.seconds # for testing how delay looks
    @user = User.find(params[:id])
    @user.update_attributes(preview_picture: params[:user][:picture])
    render text: ""
  end

  def get_image_preview
    @user = User.find(params[:id])
  end
end

user_image_preview.js

var first_pass = true;

function onload_test() {
  if (first_pass == false) {
    $.getScript("/users/5/get_image_preview.js");
  } else {
    first_pass = false;
  }
  $(".ajax-loader").hide();
  $(".image_preview").show();
}

$(function() {
  $("input[type=file]").change(function(){
    var form = $("form#edit_user");
    var original_action = form.attr("action");

    form.attr("action", "/users/5/upload_image_preview");
    form.attr("target", "upload_target");
    form.submit();

    form.attr("action", original_action);
    form.attr("target", "");

    $(".ajax-loader").show();
    $(".image_preview").hide();
  });
});

注意：我在代码中硬编码了一些URL值。这只是为了调试，我将在file_field标签上添加数据属性，告诉我的JavaScript要将图像发布到哪个URL。

get_image_preview.js

$("div.image_preview").html('<%= escape_javascript(image_tag @user.preview_picture.url) %>');

- RyanB