Question

我正在尝试使用回形针附加多个图像，并在提交表单之前显示附加的任何图像的预览。有没有人已经这样做了，或者有人可以建议我这样做的方法吗？我知道它需要使用jQuery和AJAX，但在提交表单之前我不知道在哪里查找附加图像。感谢。

Answer 1

您无法使用AJAX进行文件上传。遗憾的是，浏览器不支持使用XHR传递。我建议添加一个iframe（也可以通过允许异步图像上传的所有gems /插件完成）并添加一个卸载。当文件输入发生变化时，将主表单的目标更改为iframe的名称，提交它并等待该iframe的上传。

这将是这样的：

<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在

中返回预览

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

我希望这是有道理的！如果您需要更多信息，请告诉我。

Answer 2

在class =＆＃34; target＆＃34;

中换行图像标签

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

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

注意：我对一些网址值进行了硬编码。这只是用于调试，我将在file_field标记上有数据属性，它将告诉我的javascript将图像发布到哪个URL。

<强> get_image_preview.js

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

使用Paperclip选择附件后显示图像预览

3 个答案: