这是 Bootstrap 3、4 和 5 的解决方案。

要制作一个看起来像按钮的功能文件输入控件，您只需要 HTML：

HTML

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

这适用于所有现代浏览器，包括 IE9+。如果您还需要对旧 IE 的支持，请使用下面显示的旧方法。

这种技术依赖于 HTML5hidden属性。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;
}

请注意，当您单击 a 时，旧 IE 不会触发文件输入<label>，因此 CSS“膨胀”做了几件事来解决这个问题：

• 使文件输入跨越周围的整个宽度/高度<span>
• 使文件输入不可见

反馈和补充阅读

我已经发布了有关此方法的更多详细信息，以及如何向用户显示选择了哪些/多少文件的示例：

https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-
bootstrap-3/