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

Question

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

*编辑 - 我没有包括这个表格的其余部分，因为它是巨大的，但这出现在一个 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 一起工作。

标签： javascripthtmlruby-on-rails

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