Question

我想自定义提交文件btn。为此，我使用纯css技巧。但问题是这在编辑之前效果不佳。我使用cocoon将图像作为嵌套文件添加到我的实例中。

我改变这一点（完美地运作）：

<div class="nested-fields col m4 s6">
    <div class="flat_photo_box">
        <%= f.file_field :image %>
    </div>
</div>

进入此（部分有效）：

<div class="nested-fields col m4 s6">
    <div class="image-upload">
       <label for="file-input<%=f.object.id%>">
         <span class="fa fa-download trash_nested_form"></span>
       </label>
       <%= f.file_field :image, id:"file-input#{f.object.id}" %>
    </div>
</div>

这个css技巧：

.image-upload > input
{
   display: none;
}
.image-upload > label{
  cursor:pointer;
}

错误=我可以创建尽可能多的嵌套表单，但回形针只保存我上传到第一个嵌套元素的最后一个图像。你知道错误的来源吗

Answer 1

您将id分配给file_field，html-id应该是唯一的。虽然页面将正确呈现，但在表单提交时，只有一个将提交给服务器。而是像这样编写你的字段：

<%= f.file_field :image, class:"file-input#{f.object.id}" %>

为什么要分配特定ID？

编辑嵌套表单的提交btn

1 个答案: