【发布时间】：2020-05-14 08:44:40
【问题描述】：
我有一个simple form(product model)，我也在使用cocoon gem 来表示我在该表单中的nested fields(attachments model)。当我创建产品时，我使用 cocoon gem 作为嵌套字段，以便创建 attachments(images) 并将它们与该产品相关联。用户可以添加茧字段并向该字段添加图像。我还在每个字段内都有一个预览，因此用户可以查看他们附加到该字段的图像。但唯一的问题是预览只显示在第一个茧字段中。如果我尝试将图像添加到另一个茧字段，则图像预览不会出现在该字段中。我希望能够添加一个茧字段，然后将图像添加到该字段并查看该字段内该图像的预览。关于如何更改代码以实现上述目标的任何想法？
这是我的设置：
<%= f.simple_fields_for :attachments do |attachment| %>
<%= render 'products/attachment_fields', form: attachment %>
<% end %>
<div class="links" id="add_attachment">
<%= link_to_add_association raw('<i class="fas fa-plus"></i>'), f, :attachments, form_name: 'form' %>
</div>
attachment_fields 部分：
<div class="nested-fields">
<div class="col-md-12">
<div class="image-border">
<div class="image-border-content">
<div class="parent">
<div class="image-content" id="divImageMediaPreview">
<div class="font-awesome-image"><i class="far fa-image"></i></div>
</div>
</div>
<label class="btn btn-light btn-sm" style="width: 100%;">
Add a file!
<span style="display:none;">
<%= form.input :image, label: false, as: :file, input_html: { class:"custom-file-input", id: "ImageMedias" } %>
</span>
</label>
</div>
</div>
<div class="links" style="margin-bottom: 10px;">
<%= link_to_remove_association raw('<i class="far fa-trash-alt"></i> Remove'), form, class: "btn btn-light btn-sm", :style => "width: 100%; margin-top: -15px;" %>
</div>
</div>
</div>
图片预览：
$("#ImageMedias").change(function () {
if (typeof (FileReader) != "undefined") {
let dvPreview = $("#divImageMediaPreview");
dvPreview.html("");
$($(this)[0].files).each(function () {
let file = $(this);
let reader = new FileReader();
reader.onload = function (e) {
let img = $("<img />");
img.attr("style", "width: 100%; height:auto;");
img.attr("src", e.target.result);
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
更新 1
我通过对@nathanvda 答案的细微调整让它工作。但我有一个小故障。如果我一次添加一个字段，则预览会出现在每个字段中，但如果我添加多个字段，则会出现下图中显示的问题。知道如何解决这个问题吗？
这是我正在使用的确切代码：
<div class="nested-fields">
<div class="col-md-12">
<div class="image-border">
<div class="image-border-content">
<div class="parent">
<div class="image-content image-media-preview">
<div class="font-awesome-image"><i class="far fa-image"></i></div>
</div>
</div>
<label class="btn btn-light btn-sm" style="width: 100%;">
Add a file!
<span style="display:none;">
<%= form.input :image, label: false, as: :file, input_html: { class:"custom-file-input" } %>
</span>
</label>
</div>
</div>
<div class="links" id="remove_attachment" style="margin-bottom: 10px;">
<%= link_to_remove_association raw('<i class="far fa-trash-alt"></i> Remove'), form, class: "btn btn-light btn-sm", :style => "width: 100%; margin-top: -15px;" %>
</div>
</div>
</div>
$(function() {
$('input[type=file]').change(function(){
if (typeof (FileReader) != "undefined") {
let dvPreview = $(this).parents(".image-border").find(".image-media-preview");
dvPreview.html("");
$($(this)[0].files).each(function () {
let file = $(this);
let reader = new FileReader();
reader.onload = function (e) {
let img = $("<img />");
img.attr("style", "width: 100%; height:auto;");
img.attr("src", e.target.result);
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
})
});
【问题讨论】：
-
这与更新有关。您是否允许用户选择多个图像？如果是这样，您希望向用户展示什么？您的屏幕截图中似乎只有一张图片的空间。
-
故障是显示两张图像，其中只有一张空间。这怎么发生的？当您说“一次添加多个字段”时 --> 这究竟是什么意思？
标签： javascript jquery ruby-on-rails cocoon-gem