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

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

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

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

<％= 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').

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

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

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

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.

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

8 个解决方案

#1

This is how I do it:

我是这样做的：

1. In the view add your form file field and hide it
2. 在视图中添加表单文件字段并将其隐藏
3. Add a styled additional field just to display the file name
4. 添加样式化的附加字段只是为了显示文件名

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

6. 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....)

   在您的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()
   

#2

This worked great for me and only requires HTML

这对我很有用，只需要HTML

<label class="btn btn-primary">
  Add a file!
  <span style="display:none;">
    <%= f.file_field :image, required: true, multiple: true, name: 'picture' %>
  </span>
</label>

#3

I ran across and am using Jasny's extension to Bootstrap 3. It seems to work well so far.

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

#4

No JS required, just plain css

scss

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

html / slim

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

---

I recommend using compass for cross browser compatibility

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

#5

As @rafaelfranca said you can't style file input but you can add your own button which will be clicking your hidden original button. See example here http://jsfiddle.net/rUdf2/6/

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

#6

Every Browser has a different type of file input field button and this makes it a pain. You can play a little with css. This has given me a basic styling with JS without the annoying "No file chosen" text in chrome and Safary:

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

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

Otherwise the best solution is to hide it and show a fake one that intercepts the click:

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

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

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

With respect to the question of how to show that a file has been uploaded, a basic solution with jquery file upload is to detect the upload complete event and replace some of your text with a success message (The exact file name I believe it is not possible to obtain with modern browsers):

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

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

In summary, a basic solution is to use javascript in your assets to:

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

1. Hide the annoying "No file chosen text" with css.
2. 使用css隐藏恼人的“无文件选择文本”。
3. Place your "Chose file" text next to the button and give it a class you can reference.
4. 将“选择文件”文本放在按钮旁边，并为其提供一个可以参考的课程。
5. Replace the text with "File uploaded"
6. 用“文件上传”替换文本

#7

No fancy shiz required:

不需要花哨的shiz：

HTML:

HTML：

<form method="post" action="/api/admin/image" enctype="multipart/form-data">
    <input type="hidden" name="url" value="<%= boxes[i].url %>" />
    <input class="image-file-chosen" type="text" />
    <br />
    <input class="btn image-file-button" value="Choose Image" />
    <input class="image-file hide" type="file" name="image"/> <!-- Hidden -->
    <br />
    <br />
    <input class="btn" type="submit" name="image" value="Upload" />
    <br />
</form>

JS:

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);
      });
});

CAUTION: The three form elements in question MUST be siblings of each other (.image-file-chosen, .image-file-button, .image-file)

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

#8

If you are using Bootstrap, Simple Forms, Jasny, and ReFile, this post may be of interest to you refile simple_form undefined method attachment_field

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