ruby-on-rails-3 - RoR "file_field" 和 Twitter 引导程序

Question

我正在尝试在我的 Rails3 应用程序中自定义这部分代码

<%= f.submit "Create my account", :class => "btn btn-small btn-primary btn-inverse" %>
<%= f.file_field :photo %>

进入这个：

<%= f.submit "Create my account", :class => "btn btn-small btn-primary btn-inverse" %>
<%= f.file_field :photo, :class => "btn btn-small btn-primary btn-inverse" %>

但 file_field 似乎没有响应自定义。

有人可以帮我解决这个问题吗？

Answer 1

我使用了mindriot的建议，但是需要在内联onchange js之后添加一个逗号并且由于不允许单字符编辑而无法编辑他的答案：

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-small btn-primary btn-inverse" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
    <%= f.file_field :file_upload, onchange: "$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\\\|/]/).pop());", style: "display: none;" %>
  </span>
  <span class="form-control"></span>
</div>

Answer 2

该类应用于输入而不是按钮

http://jsfiddle.net/baptme/k3KtH/

如果要设置按钮样式，可以使用此处描述的方法： http ://www.quirksmode.org/dom/inputfile.html

Answer 3

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-small btn-primary btn-inverse" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
    <%= f.file_field :photo, onchange: "$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\\\|/]/).pop());" style: "display: none;" %>
  </span>
  <span class="form-control"></span>
</div>

基于这个答案。