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

Posted 2023-02-24

【中文标题】在 Rails 3 中使用 Bootstrap 为 simple_form_for 设置样式文件上传按钮

【英文标题】：Styling file upload button for simple_form_for with Bootstrap in Rails 3

【发布时间】：2013-01-08 16:29:58

【问题描述】：

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

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

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

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

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

【参考方案1】：

正如@rafaelfranca 所说，您无法设置file 输入的样式，但您可以添加自己的按钮，该按钮将单击隐藏的原始按钮。请参阅此处的示例http://jsfiddle.net/rUdf2/6/

【参考方案2】：

每个浏览器都有不同类型的文件输入字段按钮，这让人很痛苦。你可以玩一点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：

用 css 隐藏烦人的“没有选择文件的文本”。 将“选择文件”文本放在按钮旁边，并为其提供一个可供参考的类。 将文本替换为“文件已上传”

【参考方案3】：

不需要花哨的shiz：

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：

$('.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）

【参考方案4】：

这就是我的做法：

在视图中添加您的表单文件字段并将其隐藏 添加一个样式化的附加字段来显示文件名

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

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

在您的 JS（显示带有 jQ​​uery 的咖啡）中，将点击从显示按钮传递到真实文件输入，当他们选择文件时，将文件名放在显示文本字段中（我删除路径以便我不'看不到 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()

【讨论】：

很好的答案。我只有一个问题：'uneditable-input' 类有什么作用？

uneditable-input 它是一个引导类，只是禁用输入字段，因此更改内容的唯一方法是通过文件选择器

我的文件输入似乎没有被隐藏，有人知道为什么吗？

@Wraithseeker，当我进行检查时，隐藏：true 被 display: block of input[type="file"] 覆盖 input[type="file"] 1. display: block; [隐藏]，模板 2. 显示：无；您可以在 input_html 中添加一个类：class: 'hidden-input' 并在 scss 中添加更具体的规则： products.scss // 新产品/编辑（即 _form）输入 [type="file"]。隐藏输入显示：无；

我必须这样做 (HAML): = f.input :pic, as: :hidden, input_html: hidden: true, type: "file", class: "file required" 到隐藏原始文件上传框。另外，为了让它只读，“不可编辑字段”类对我不起作用，所以我添加了只读：真。效果很好！

【参考方案5】：

我遇到并正在使用Jasny's extension to Bootstrap 3。到目前为止，它似乎运行良好。

【参考方案6】：

不需要 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 / 苗条

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

---

我建议使用指南针来实现跨浏览器兼容性

【讨论】：

您的 CSS 中有两个小错别字（一个缺少分号，一个缺少 ），对于 Safari 支持，添加 -webkit-transform: translate(-300px, 0)scale(4); 会很有帮助。除此之外，很好的解决方案，非常感谢！

【参考方案7】：

如果您使用的是 Bootstrap、Simple Forms、Jasny 和 ReFile，您可能会对这篇文章感兴趣 refile simple_form undefined method attachment_field

【参考方案8】：

这对我很有用，只需要 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>

【参考方案9】：

<label class="btn btn-primary"
<%= f.input :upload, label: 'PDF file:',
class:"hidden", input_html: accept: ('application/pdf')  %>
</label>

为我工作

使用 class="hidden"

PS：我正在使用 Tailwind CSS