从上面的其他文章中得到一些灵感，这里有一个完整的解决方案，它结合了一个看起来像表单控制字段的输入组插件，用于一个干净的文件输入小部件，其中包括到当前文件的链接。

.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for stackoverflow viewing */ .input-file .input-group-addon { border: 0px; padding: 0px; } .input-file .input-group-addon .btn { border-radius: 0 4px 4px 0 } .input-file .input-group-addon input { cursor: pointer; position:absolute; width: 72px; z-index:2;top:0;right:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0; background-color:transparent; color:transparent; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <div class="input-group input-file"> <div class="form-control"> <a href="/path/to/your/current_file_name.pdf" target="_blank">current_file_name.pdf</a> </div> <span class="input-group-addon"> <a class='btn btn-primary' href='javascript:;'> Browse <input type="file" name="field_name" onchange="$(this).parent().parent().parent().find('.form-control').html($(this).val());"> </a> </span> </div>

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

基于绝对聪明的@claviska解决方案，所有的功劳都要归功于他。

全功能的Bootstrap 4文件输入验证和帮助文本。

基于输入组示例，我们有一个用于向用户显示文件名的虚拟输入文本字段，该字段由隐藏在标签按钮后面的实际输入文件字段上的onchange事件填充。除了包含引导验证支持外，我们还可以点击输入中的任何地方来打开文件对话框。

文件输入的三种状态

这三种可能的状态是未验证的、有效的和无效的，需要设置虚拟html输入标记属性。

Html标记作为输入

我们只引入了2个自定义类input-file-dummy和input-file-btn，以正确地设置样式并连接所需的行为。其他的都是标准的Bootstrap 4标记。

<div class="input-group">
  <input type="text" class="form-control input-file-dummy" placeholder="Choose file" aria-describedby="fileHelp" required>
  <div class="valid-feedback order-last">File is valid</div>
  <div class="invalid-feedback order-last">File is required</div>
  <label class="input-group-append mb-0">
    <span class="btn btn-primary input-file-btn">
      Browse… <input type="file" hidden>
    </span>
  </label>
</div>
<small id="fileHelp" class="form-text text-muted">Choose any file you like</small>

JavaScript行为规定

虚拟输入需要是只读的，就像原来的例子一样，以防止用户更改只能通过打开文件对话框更改的输入。不幸的是，验证不会发生在只读字段上，所以我们切换了焦点和模糊(jquery事件onfocusin和onfocusout)输入的可编辑性，并确保它再次成为可验证的文件被选中。

除了使文本字段可单击之外，通过触发按钮的单击事件，填充虚拟字段的其余功能是由@claviska设想的。

$(function () {
  $('.input-file-dummy').each(function () {
    $($(this).parent().find('.input-file-btn input')).on('change', {dummy: this}, function(ev) {
      $(ev.data.dummy)
        .val($(this).val().replace(/\\/g, '/').replace(/.*\//, ''))
        .trigger('focusout');
    });
    $(this).on('focusin', function () {
        $(this).attr('readonly', '');
      }).on('focusout', function () {
        $(this).removeAttr('readonly');
      }).on('click', function () {
        $(this).parent().find('.input-file-btn').click();
      });
  });
});

自定义样式调整

最重要的是，我们不希望只读字段在灰色背景和白色之间跳跃，所以我们确保它保持白色。span按钮没有指针光标，但我们需要为输入添加一个指针光标。

.input-file-dummy, .input-file-btn {
  cursor: pointer;
}
.input-file-dummy[readonly] {
  background-color: white;
}

nJoy !

不需要额外的插件，这个bootstrap解决方案非常适合我:

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

演示:

http://jsfiddle.net/haisumbhatti/cAXFA/1/ (bootstrap 2)

http://jsfiddle.net/haisumbhatti/y3xyU/ (bootstrap 3)

这对我来说非常合适

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