这是Bootstrap 3和Bootstrap 4的解决方案。
要制作看起来像按钮的功能文件输入控件，您只需要HTML：
的HTML
<label > Browse <input type="file" hidden></label>
这适用于所有现代浏览器，包括IE9 +。如果您还需要对旧IE的支持，请使用下面显示的旧方法。
此技术依赖于HTML5
hidden属性。Bootstrap 4使用以下CSS在不支持的浏览器中填充该功能。如果您使用的是Bootstrap
3，则可能需要添加。
[hidden] { display: none !important;}旧版IE的旧版方法
如果您需要对IE8及以下版本的支持，请使用以下HTML / CSS：
HTML
<span > 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;}请注意，当您单击时，旧的IE不会触发文件输入
<label>，因此CSS“膨胀”可以解决以下问题：
- 使文件输入跨越周围的整个宽度/高度
<span>
- 使文件输入不可见
