将 html 和 javascript 表单信息转换为 rails

Question

我无法让它以我的 rails 形式工作。我想更改文件上传按钮，我设法找到了使按钮看起来正确并显示所选文件名称的代码。

*EDIT - 我没有包括这个表格的其余部分，因为它是巨大的，但这出现在一个 form_for 块中。

<div class="form-group">

  <label class="btn btn-danger" for="my-file-selector">
      <input id="my-file-selector" type="file" style="display:none" 
      onchange="$('#upload-file-info').html(this.files[0].name)">
      Avatar Upload
  </label>
  <span class='label text-secondary' id="upload-file-info"></span>

</div>

我遇到的问题是将它链接到我数据库中的图像字段。因为它现在不保存图像。我需要翻译它，这样它才能像我以前那样工作。这是我的表单上传按钮，适用于 rails，但它不显示所选文件的名称。

<div class="form-group">

  <label class="btn btn-danger">
    Avatar Upload
    <span style="display:none;">
      <%= f.file_field :image %>
    </span>
  </label>

</div>

如何将两者结合起来以获得所需的效果？在这里查看图片。第一个按钮是我的，它上传图片就好了，只是它不显示文件名。第二个按钮是 style="display:none" 关闭时的样子。它显示文件名。 （第二个按钮使用下面 sfate 答案中的代码。）我需要它看起来像第一个按钮。

第三个按钮是我想要实现的，只是我不知道如何使它与 rails file_field 和我的 :image 一起工作。

Answer 1

您似乎以错误的方式使用file_field。 file_field 只能在 form_for 块中使用。 更多信息：https://api.rubyonrails.org/v5.1/classes/ActionView/Helpers/FormHelper.html

要归档你想要的 - 你可以像这样使用file_field_tag：

<div class="form-group">
  <label class="btn btn-danger">
    Avatar Upload
    <span>
      <%= file_field_tag 'image', accept: 'image/png,image/gif,image/jpeg' %>
    </span>
  </label>
</div>

---

编辑：

根据已编辑的问题。 您无法在文件选择时动态获取文件名，仍然需要 javascript：

<%= form_for :user do |f| %>
  <div class="form-group">
    <label class="btn btn-danger" for="my-file-selector">
      <%= f.file_field :image, id: 'my-file-selector', style: 'display: none', onchange: "document.getElementById('upload-file-info').textContent = this.value" %>
      Avatar Upload
    </label>
    <span class='label text-secondary' id="upload-file-info"></span>
  </div>
<% end %>

---

如果您只需要从现有对象呈现文件名（此示例为@user）：

<%= form_for @user do |f| %>
  <div class="form-group">
    <label class="btn btn-danger" for="my-file-selector">
      <%= f.file_field :image, id: 'my-file-selector', style: 'display: none' %>
      Avatar Upload
    </label>
    <span class='label text-secondary' id="upload-file-info">
      <%= @user.image.original_filename %>
    </span>
  </div>
<% end %>

还要注意original_filename 方法存在于带有paperlip 或carrierwave 宝石的附件上，如果您不使用它们，您可能不会在image 对象上使用它们。