为什么没有一个花哨的文件元素上传按钮推特引导?如果为上传按钮实现蓝色的主按钮,那就太好了。它甚至有可能巧妙的上传按钮使用CSS?(看起来像一个无法操纵的本机浏览器元素)
当前回答
我也有同样的问题,我是这样尝试的。
<div>
<button type='button' class='btn btn-info btn-file'>Browse</button>
<input type='file' name='image'/>
</div>
CSS
<style>
.btn-file {
position:absolute;
}
</style>
JS的
<script>
$(document).ready(function(){
$('.btn-file').click(function(){
$('input[name="image"]').click();
});
});
</script>
注意: 按钮.btn-file必须在与输入文件相同的标签中
希望你找到了最好的解决方案…
其他回答
这是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/
从上面的其他文章中得到一些灵感,这里有一个完整的解决方案,它结合了一个看起来像表单控制字段的输入组插件,用于一个干净的文件输入小部件,其中包括到当前文件的链接。
.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for stackoverflow viewing */ .input-file .input-group-addon { border: 0px; padding: 0px; } .input-file .input-group-addon .btn { border-radius: 0 4px 4px 0 } .input-file .input-group-addon input { cursor: pointer; position:absolute; width: 72px; z-index:2;top:0;right:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0; background-color:transparent; color:transparent; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <div class="input-group input-file"> <div class="form-control"> <a href="/path/to/your/current_file_name.pdf" target="_blank">current_file_name.pdf</a> </div> <span class="input-group-addon"> <a class='btn btn-primary' href='javascript:;'> Browse <input type="file" name="field_name" onchange="$(this).parent().parent().parent().find('.form-control').html($(this).val());"> </a> </span> </div>
我修改了@claviska的答案,并按照我喜欢的方式工作(Bootstrap 3,4未测试):
<label class="btn btn-default">
<span>Browse</span>
<input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')">
</label>
不需要花哨的东西:
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)
这对我来说非常合适
<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>