我想使用paperclip附加多张图片,并在提交表单之前显示任何已附加图像的预览。是否有人已经完成了这个任务,或者是否有人可以建议一些方法来实现这个目标?我知道需要使用jQuery和AJAX,但我不知道在提交表单之前如何查找已附加的图像。谢谢。
我想使用paperclip附加多张图片,并在提交表单之前显示任何已附加图像的预览。是否有人已经完成了这个任务,或者是否有人可以建议一些方法来实现这个目标?我知道需要使用jQuery和AJAX,但我不知道在提交表单之前如何查找已附加的图像。谢谢。
不幸的是,浏览器不支持使用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,并将其放置在每个文件输入字段下方。
我希望这很清楚!如果您需要更多关于此的信息,请告诉我。
将一个图片标签包含在 class="target" 中
<div class="target">
<img class="card_image" src="">
</div>
$(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);
});
我遇到过这个问题好几次,最终想出了一个(有点)简单的解决方案。我不敢说这段代码完美无缺,但它确实能够工作。
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) %>');