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

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

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

有可接受结果的简单解决办法:

<input type="file" class="form-control">

以及风格:

input[type=file].form-control {
    height: auto;
}

这是珍妮的自举叉里的。

可以使用。创建简单的上传按钮

<span class="btn btn-file">Upload<input type="file" /></span>

使用fileupload插件，您可以创建更高级的小部件。看一看 http://jasny.github.io/bootstrap/javascript/#fileinput

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

但是你可以用这个技巧:

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)