使用Rails 3中的Bootstrap为simple_form_for设置文件上传按钮的样式 [英] Styling file upload button for simple_form_for with Bootstrap in Rails 3

问题描述

使用simple_form_for，Bootstrap和Rails 3.在表单中：

<％= f.input：upload，label：'PDF file：'，input_html：{accept：（'application / pdf'）}％>

d样式，这样选择文件按钮可以有不同的类（'btn btn-primary'）。

另外，至少在使用Bootstrap时，严重失准。

最后，当没有添加任何文本时，如何将文本从没有选择文件重新定义为选择文件，并显示有一个文件名。

解决方案

这是我做的：
$ b $ ol

添加一个样式化的附加字段来显示文件名称

将一个按钮添加到触发文件浏览对话框

 < div class =control-group> 
< div class =attach-set> 
 <％= f.input：real_file，input_html：{hidden：true}，label：'Upload Attachment'％> 
< div class =input-append> 
< input id =file-displayclass =input-large uneditable-inputtype =text> 
< a id =upload-btnclass =btn>< i class =icon-upload-alt>< / i>浏览和LT; / A> 
< / div> 
< / div> <！ -  / attach-set  - > 
< / div> <！ -  / control-group  - > 
  

在你的JS（显示的Coffee w / jQuery）到真正的文件输入，当他们选择一个文件放在显示文本字段中的文件名（我放弃的路径，所以我没有看到C：\FakePath ....）

  $（document）.ready  - > 
 
＃----------------------------------------- ------------- 
＃漂亮的上传字段
＃--------------------- --------------------------------- 
 $ realInputField = $（'＃real_file'）
 
＃只显示显示字段中的文件名
 $ realInputField.change  - > 
 $（'＃file-display'）。val $（@）。val（）。replace（/^.* [\\\ / / /''）
 
＃触发真正的输入字段点击调出文件选择对话框
 $（'＃upload-btn'）。click  - > 
 $ realInputField.click（）
  

Using simple_form_for, Bootstrap and Rails 3. In a form:

<%= f.input :upload, label: 'PDF file:' , input_html: {accept: ('application/pdf') } %>

I don't know how I'd style this so that the "choose file" button can have a different class ('btn btn-primary').

Additionally, when using with Bootstrap at least, its severely misaligned by default. See attached image.

Finally, how do I redefine the text from "No file chosen" to "Chose file" when there isn't one added yet, and show the file name when there is one.

解决方案

This is how I do it:

1. In the view add your form file field and hide it
2. Add a styled additional field just to display the file name

3. Add a button to trigger the file browse dialog

   <div class="control-group">
     <div class="attach-set">
       <%= f.input :real_file, input_html: { hidden: true }, label: 'Upload Attachment' %>
       <div class="input-append">
         <input id="file-display" class="input-large uneditable-input" type="text">
         <a id="upload-btn" class="btn"><i class="icon-upload-alt"></i> Browse</a>
       </div>
     </div> <!-- /attach-set -->
   </div> <!-- /control-group -->
   

4. In your JS (Coffee w/ jQuery shown), pass the click from the display button onto the real file input and when they select a file drop the file name in the display text field (I drop the path so that I don't see C:\FakePath....)

   $(document).ready ->
   
     # ------------------------------------------------------
     # pretty-fy the upload field
     # ------------------------------------------------------
     $realInputField = $('#real_file')
   
     # drop just the filename in the display field
     $realInputField.change ->
       $('#file-display').val $(@).val().replace(/^.*[\\\/]/, '')
   
     # trigger the real input field click to bring up the file selection dialog
     $('#upload-btn').click ->
       $realInputField.click()
   

这篇关于使用Rails 3中的Bootstrap为simple_form_for设置文件上传按钮的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！