代码之家 › 专栏 › 技术社区 › ddonche

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

ruby-on-rails html javascript

ddonche · 技术社区 · 7 年前

*编辑-我没有包括这个表单的其余部分,因为它是巨大的,但这出现在一个form_for block中。

<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>

<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文件字段和my:image一起工作。

1 回复 | 直到 7 年前

sfate 7 年前

好像你在用 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 如果你不使用它们,就反对。