Bootstrap 中是否有自带Bootstrap风格的文件上传按钮，如果没有，又应该如何自定义美化文件上传按钮的样式呢？

2 个回答

• 0

  Bootstrap中也默认也没有实现Bootstrap风格的上传按钮样式，但我们可以使用<label>标签来巧妙实现—将文件上传按钮标签放在一个<label>标签中，并且将这个上传按钮隐藏起来，这样我们只需要美化<label>标签就可以了，代码如下：

  HTML

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

  CSS

  [hidden] {
    display: none !important;
  }
  

  以上方式可以适用于大多数现代浏览器，包括IE9+，如果你需要兼容IE8及以下的浏览器，则还需要做一些特殊处理，如下：

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

  评论 分享

  

  Rector

  2021-01-06 回答
• 0

  当然，除了使用纯HTML和CSS样式来实现自定义上传按钮之处，我们还可以借助jQuery来实现，如下：

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

  评论 分享

  

  Rector

  2021-01-06 回答