我很惊讶没有提到<label>元素。

解决方案:

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" class="d-none">
    Button Text Here
</label>

不需要任何JS，或时髦的css…

包含文件名的解决方案:

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" style="display:none" 
    onchange="$('#upload-file-info').text(this.files[0].name)">
    Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span>

上面的解决方案需要jQuery。

注意:在页面上显示用户提供的内容时使用$.text()。这个答案的早期版本使用了$. HTML()，这是不安全的-文件名可以包含HTML标记。

我已经创建了一个自定义上传按钮，只接受图像，这可以根据您的要求修改。

希望这能有所帮助!!：）

(已使用的Bootstrap框架)

代码笔链接

HTML

<center>
 <br />
 <br />
 <span class="head">Upload Button Re-Imagined</span>
 <br />
 <br />
 <div class="fileUpload blue-btn btn width100">
   <span>Upload your Organizations logo</span>
   <input type="file" class="uploadlogo" />
 </div>
</center>

CSS

 .head {
   font-size: 25px;
   font-weight: 200;
 }

 .blue-btn:hover,
 .blue-btn:active,
 .blue-btn:focus,
 .blue-btn {
   background: transparent;
   border: solid 1px #27a9e0;
   border-radius: 3px;
   color: #27a9e0;
   font-size: 16px;
   margin-bottom: 20px;
   outline: none !important;
   padding: 10px 20px;
 }

 .fileUpload {
   position: relative;
   overflow: hidden;
   height: 43px;
   margin-top: 0;
 }

 .fileUpload input.uploadlogo {
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;
   font-size: 20px;
   cursor: pointer;
   opacity: 0;
   filter: alpha(opacity=0);
   width: 100%;
   height: 42px;
 }


 /*Chrome fix*/

 input::-webkit-file-upload-button {
   cursor: pointer !important;
 }

JS

// You can modify the upload files to pdf's, docs etc
//Currently it will upload only images
$(document).ready(function($) {

  // Upload btn
  $(".uploadlogo").change(function() {
    readURL(this);
  });

  function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "gif" || ext == "svg")) {
      var path = $('.uploadlogo').val();
      var filename = path.replace(/^.*\\/, "");
      $('.fileUpload span').html('Uploaded logo : ' + filename);
      // console.log(filename);
    } else {
      $(".uploadlogo").val("");
      $('.fileUpload span').html('Only Images Are Allowed!');
    }
  }
});

我想我要加上我的三便士价值，只是说一下如何默认的.custom-file-label和custom-file-input BS4文件输入以及如何使用它们。

后一个类在输入组上，是不可见的。而前者是可见标签，并且有一个:后伪元素，看起来像一个按钮。

<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload">Choose file</label>
</div>

你不能向伪元素中添加类，但是你可以用CSS(或SASS)来设置它们的样式。

.custom-file-label:after {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430;
    pointer: cursor;
}

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

但是你可以用这个技巧:

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)

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