我也有同样的问题，我是这样尝试的。

<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必须在与输入文件相同的标签中

希望你找到了最好的解决方案…

这是我喜欢的最好的文件上传风格:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

你可以得到演示和更多的风格:

http://www.jasny.net/bootstrap/javascript/#fileinput

但是使用这个，你应该用jasny bootstrap文件替换twitter bootstrap ..

的问候。

这对我来说非常合适

<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 -->
    &nbsp;
    <span  class="badge badge-important" ></span>
</span>

我修改了@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>

我很惊讶没有提到<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标记。

请检查推特引导文件输入。 它使用非常简单的解决方案，只需添加一个javascript文件，并粘贴以下代码:

$('input[type=file]').bootstrapFileInput();