使用 simple_form_for、Bootstrap 和 Rails 3. 在表单中：
<%= f.input :upload, label: 'PDF file:' , input_html: {accept: ('application/pdf') } %>
我不知道如何设置它的样式，以便“选择文件”按钮可以有不同的类（'btn btn-primary'）。
此外，至少在与 Bootstrap 一起使用时，默认情况下它会严重错位。见附图。
最后，当还没有添加文件时，如何将文本从“未选择文件”重新定义为“选择文件”，并在有文件时显示文件名。
我就是这样做的：
添加一个按钮来触发文件浏览对话框
<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（显示带有 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()
这对我很有用，只需要 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>
我遇到并正在使用Jasny 对 Bootstrap 3 的扩展。到目前为止，它似乎运作良好。
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
我建议使用指南针来实现跨浏览器兼容性
正如@rafaelfranca 所说，您无法设置file输入样式，但您可以添加自己的按钮，该按钮将单击隐藏的原始按钮。请参阅此处的示例http://jsfiddle.net/rUdf2/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 来：
不需要花哨的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）
如果您使用的是 Bootstrap、Simple Forms、Jasny 和 ReFile，您可能会对这篇文章感兴趣refile simple_form undefined method attachment_field
<label class="btn btn-primary"
<%= f.input :upload, label: 'PDF file:',
class:"hidden", input_html: {accept: ('application/pdf') } %>
</label>
为我工作
使用类=“隐藏”
PS：我正在使用 Tailwind CSS