如何隐藏input type="file"的按钮和文本部分，且保留正常上传功能

以下两种方案均可保留原有上传功能，不会影响表单提交、文件选择回调、多选限制等原有逻辑。

方案1：透明悬浮法（无需修改原有DOM结构） #

将file输入框设为完全透明并铺满父容器，点击区域依旧触发原有文件选择功能，仅隐藏默认UI。

新增CSS样式： #

/* 包裹input的父容器需要设为相对定位 */
.input-group {
  position: relative;
  /* 可自行添加背景、文字、宽高属性自定义按钮外观 */
}

#files {
  /* 完全透明不可见 */
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

方案2：label关联法（完全自定义按钮外观） #

将默认input控件隐藏，通过label的for属性绑定input的id，点击label即可触发文件选择功能，可自由定制按钮样式。

修改后HTML代码： #

<div class="row">
  <div class="form-group col-md-12">
    <label>File upload</label>
    <div class="input-group col-xs-12 ">
      <input type="file" id="files" name="files[]" class="form-control btn btn-primary mb-xl-4"  multiple style="display: none;">                        
      <label for="files" class="btn btn-primary">点击上传文件</label>
    </div>  
   </div>  
  </div>

你可以任意修改<label for="files">的CSS样式，实现任意想要的上传按钮效果。

内容的提问来源于stack exchange，提问作者user2134124