这对我来说非常合适

<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>

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

<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/

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

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

尝试遵循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>

设置上传按钮的样式很麻烦，因为它设置的是输入的样式而不是按钮的样式。

但是你可以用这个技巧:

http://www.quirksmode.org/dom/inputfile.html

简介:

Take a normal <input type="file"> and put it in an element with position: relative. To this same parent element, add a normal <input> and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the <input type="file">. Set the z-index of the <input type="file"> to 2 so that it lies on top of the styled input/image. Finally, set the opacity of the <input type="file"> to 0. The <input type="file"> now becomes effectively invisible, and the styles input/image shines through, but you can still click on the "Browse" button. If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window. (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the to remain clickable)