Ruby-on-rails 使用 Rails 3 中的 Bootstrap 为 simple_form_for 设置样式文件上传按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14509449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling file upload button for simple_form_for with Bootstrap in Rails 3
提问by tibbon
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.
最后，当还没有添加时，如何将文本从“未选择文件”重新定义为“选择文件”，并在有文件时显示文件名。
回答by BSB
This is how I do it:
这就是我的做法：
- In the view add your form file field and hide it
- Add a styled additional field just to display the file name
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 -->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....)
$(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()
- 在视图中添加您的表单文件字段并将其隐藏
- 添加样式附加字段只是为了显示文件名
添加一个按钮来触发文件浏览对话框
<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()
回答by Yoko
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>
回答by kross
I ran across and am using Jasny's extension to Bootstrap 3. It seems to work well so far.
我遇到了并且正在使用Jasny 对 Bootstrap 3 的扩展。到目前为止，它似乎运作良好。
回答by Max
No JS required, just plain css
不需要 JS，只需要简单的 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 / 苗条
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
我建议使用指南针来实现跨浏览器兼容性
回答by Vasiliy Ermolovich
As @rafaelfranca said you can't style fileinput but you can add your own button which will be clicking your hidden original button. See example here http://jsfiddle.net/rUdf2/6/
正如@rafaelfranca 所说，您无法设置file输入样式，但您可以添加自己的按钮，该按钮将单击隐藏的原始按钮。请参阅此处的示例http://jsfiddle.net/rUdf2/6/
回答by joscas
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 和 Safari 中烦人的“未选择文件”文本：
$(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 来：
- Hide the annoying "No file chosen text" with css.
- Place your "Chose file" text next to the button and give it a class you can reference.
- Replace the text with "File uploaded"
- 用 css 隐藏烦人的“无文件选择文本”。
- 将“选择文件”文本放在按钮旁边，并为其指定一个可以参考的类。
- 将文本替换为“上传的文件”
回答by mattdlockyer
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）
回答by Chris Hough
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，你可能会对这篇文章感兴趣refile simple_form undefined method attachment_field
