为什么没有一个花哨的文件元素上传按钮推特引导?如果为上传按钮实现蓝色的主按钮，那就太好了。它甚至有可能巧妙的上传按钮使用CSS?(看起来像一个无法操纵的本机浏览器元素)
当前回答
这对我来说非常合适
<span>
<input type="file"
style="visibility:hidden; width: 1px;"
id='${multipartFilePath}' name='${multipartFilePath}'
onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' -->
<input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important" ></span>
</span>
其他回答
有可接受结果的简单解决办法:
<input type="file" class="form-control">
以及风格:
input[type=file].form-control {
height: auto;
}
这是Bootstrap 3,4,5的解决方案。
要制作一个看起来像按钮的功能文件输入控件，你只需要HTML:
HTML
<label class="btn btn-default">
Browse <input type="file" hidden>
</label>
这适用于所有现代浏览器，包括IE9+。如果你也需要对旧IE的支持，请使用下面所示的遗留方法。
这种技术依赖于HTML5的隐藏属性。Bootstrap 4使用以下CSS在不支持的浏览器中填充此特性。如果使用Bootstrap 3，则可能需要添加。
[hidden] {
display: none !important;
}
旧IE的遗留方法
如果您需要IE8及以下版本的支持，请使用以下HTML/CSS:
HTML
<span class="btn btn-default btn-file">
Browse <input type="file">
</span>
CSS
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
注意，当你点击<label>时，旧的IE不会触发文件输入，所以CSS“膨胀”做了一些事情来解决这个问题:
使文件输入的跨度为周围<span>的全宽/高 使文件输入不可见
反馈和额外阅读
我已经发布了关于这个方法的更多细节，以及如何向用户显示选中了多少文件的示例:
https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/
我想我要加上我的三便士价值，只是说一下如何默认的.custom-file-label和custom-file-input BS4文件输入以及如何使用它们。
后一个类在输入组上，是不可见的。而前者是可见标签，并且有一个:后伪元素，看起来像一个按钮。
<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload">Choose file</label>
</div>
你不能向伪元素中添加类，但是你可以用CSS(或SASS)来设置它们的样式。
.custom-file-label:after {
color: #fff;
background-color: #1e7e34;
border-color: #1c7430;
pointer: cursor;
}
这对我来说非常合适
<span>
<input type="file"
style="visibility:hidden; width: 1px;"
id='${multipartFilePath}' name='${multipartFilePath}'
onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' -->
<input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important" ></span>
</span>
这是另一个技巧，它不是最好的解决方案，但它只是给你一个选择
HTML代码:
<button clss="btn btn-primary" id="btn_upload">Choose File</button>
<input id="fileupload" class="hide" type="file" name="files[]">
Javascript:
$("#btn_upload").click(function(e){
e.preventDefault();
$("#fileupload").trigger('click');
});
