回報率「是，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

類被應用於輸入，而不是按鈕

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

如果你想風格，你可以使用下面介紹的方法按鈕： http://www.quirksmode.org/dom/inputfile.html

Answer 2

這裏一個「漂亮的文件Bootstrap中的輸入字段「

http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/

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> 

基於此answer。

Answer 4

我用mindriot的建議，但所需要的內聯平變化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>