使用 simple_form_for、Bootstrap 和 Rails 3. 在表单中：
<%= f.input :upload, label: 'PDF file:' , input_html: {accept: ('application/pdf') } %>
我不知道如何设置它的样式，以便“选择文件”按钮可以有不同的类（'btn btn-primary'）。
此外，至少在与 Bootstrap 一起使用时，默认情况下它会严重错位。见附图。
最后，当还没有添加文件时，如何将文本从“未选择文件”重新定义为“选择文件”，并在有文件时显示文件名。
【问题讨论】：
标签： ruby-on-rails file-upload twitter-bootstrap simple-form
正如@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）
【讨论】：
这就是我的做法：
添加一个按钮来触发文件浏览对话框
<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()
【讨论】：
我遇到并正在使用Jasny's extension to 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
我建议使用指南针来实现跨浏览器兼容性
【讨论】：
-webkit-transform: translate(-300px, 0)scale(4); 会很有帮助。除此之外，很好的解决方案，非常感谢！
如果您使用的是 Bootstrap、Simple Forms、Jasny 和 ReFile，您可能会对这篇文章感兴趣 refile simple_form undefined method attachment_field
【讨论】：
这对我很有用，只需要 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>
【讨论】：
<label class="btn btn-primary"
<%= f.input :upload, label: 'PDF file:',
class:"hidden", input_html: {accept: ('application/pdf') } %>
</label>
为我工作
使用 class="hidden"
PS：我正在使用 Tailwind CSS
【讨论】：