为什么没有一个花哨的文件元素上传按钮推特引导?如果为上传按钮实现蓝色的主按钮,那就太好了。它甚至有可能巧妙的上传按钮使用CSS?(看起来像一个无法操纵的本机浏览器元素)
当前回答
关于claviska的答案-如果你想在一个基本的文件上传中显示上传的文件名,你可以在输入的onchange事件中这样做。只需使用以下代码:
<label class="btn btn-default">
Browse...
<span id="uploaded-file-name" style="font-style: italic"></span>
<input id="file-upload" type="file" name="file"
onchange="$('#uploaded-file-name').text($('#file-upload')[0].value);" hidden>
</label>
这个jquery JS代码负责检索上传的文件名:
$('#file-upload')[0].value
或者用香草JS:
document.getElementById("file-upload").value
其他回答
我很惊讶没有提到<label>元素。
解决方案:
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" class="d-none">
Button Text Here
</label>
不需要任何JS,或时髦的css…
包含文件名的解决方案:
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none"
onchange="$('#upload-file-info').text(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span>
上面的解决方案需要jQuery。
注意:在页面上显示用户提供的内容时使用$.text()。这个答案的早期版本使用了$. HTML(),这是不安全的-文件名可以包含HTML标记。
这是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/
http://markusslima.github.io/bootstrap-filestyle/
$(":file").filestyle();
OR
<input type="file" class="filestyle" data-input="false">
尝试遵循Bootstrap v.3.3.4
<div>
<input id="uplFile" type="file" style="display: none;">
<div class="input-group" style="width: 300px;">
<div id="btnBrowse" class="btn btn-default input-group-addon">Select a file...</div>
<span id="photoCover" class="form-control">
</div>
</div>
<script type="text/javascript">
$('#uplFile').change(function() {
$('#photoCover').text($(this).val());
});
$('#btnBrowse').click(function(){
$('#uplFile').click();
});
</script>
不需要花哨的东西:
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)