使用Rails 3中的Bootstrap为simple_form_for设置样式文件上传按钮

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

我不知道我如何设计这样，以便“选择文件”按钮可以有不同的类（’btn btn-primary’）。

此外，至少在使用Bootstrap时，默认情况下严重错位。 见附图。

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

Answer 1

我是这样做的：

1. 在视图中添加表单文件字段并将其隐藏
2. 添加样式化的附加字段只是为了显示文件名

3. 添加按钮以触发文件浏览对话框

    
    
    <%= f.input :real_file, input_html: { hidden: true }, label: 'Upload Attachment' %> 
      Browse 
    
     
     

4. 在您的JS（显示的咖啡w / jQuery）中，将显示按钮上的单击传递到真实文件输入，当他们选择文件时，在显示文本字段中删除文件名（我放弃路径以便我看不到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() 

Answer 2

这对我很有用，只需要HTML

  Add a file!  <%= f.file_field :image, required: true, multiple: true, name: 'picture' %>   

Answer 3

我跑过去，正在使用Jasny对Bootstrap 3的扩展 。 到目前为止它似乎运作良好。

Answer 4

没有JS需要，只是简单的CSS

SCSS

 .fileinput-button { position: relative; overflow: hidden; float: left; margin-right: 4px; width: 110px; height: 32px; input{ opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); direction: ltr; cursor: pointer; } } 

---

html / slim

 span class="btn btn-success fileinput-button" i.fa.fa-pencil span | Select File = f.file_field :cover_ar 

---

我建议使用罗盘来实现跨浏览器兼容性

Answer 5

正如@rafaelfranca所说，您无法设置file输入样式，但您可以添加自己的按钮，单击隐藏的原始按钮。 见这里的例子http://jsfiddle.net/rUdf2/6/

Answer 6

每个浏览器都有一个不同类型的文件输入字段按钮，这使它很痛苦。 你可以用css玩一点。 这给了我一个JS的基本样式，没有在chrome和Safary中烦人的“没有文件选择”文本：

 $(document).ready(function() { $(".your_button").css("width", "80px"); }); 

否则，最好的解决方案是隐藏它并显示一个拦截点击的假的：

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

关于如何显示文件已上传的问题，使用jquery文件上传的基本解决方案是检测上传完成事件并用成功消息替换一些文本（确切的文件名我认为不是可以用现代浏览器获得）：

 $(".your_button").fileupload({ dataType: "json", done: function(e, data) { $(".place_for_your_text").text("File uploaded."); } }); 

总之，一个基本的解决方案是在您的资产中使用javascript：

1. 使用css隐藏恼人的“无文件选择文本”。
2. 将“选择文件”文本放在按钮旁边，并为其提供一个可以参考的课程。
3. 用“文件上传”替换文本

Answer 7

不需要花哨的shiz：

HTML：

JS：

 $('.image-file-button').each(function() { $(this).off('click').on('click', function() { $(this).siblings('.image-file').trigger('click'); }); }); $('.image-file').each(function() { $(this).change(function () { $(this).siblings('.image-file-chosen').val(this.files[0].name); }); }); 

注意：有问题的三个表单元素必须是彼此的兄弟元素（.image-file-chosen，.image-file-button，.image-file）

Answer 8

如果你使用的是Bootstrap，Simple Forms，Jasny和ReFile，你可能会对这篇文章感兴趣，你可以重新编写simple_form undefined方法attachment_field