自定义input file 2 整个图片区域

技巧总结：

1. 内容区域和inputfile 相对定位；
2. 将inputfile设置为透明

 

<div class="box-uploadDownload pull-right box-file">
<input type="file" unselectable="on" id="stockUpload">
 <div class="box-content">
   <div class="box-icon">
     <i class="fa fa-cloud-upload"></i>
   </div>
   <div class="box-text">
     <div class="box-title">上传</div>
    <div class="box-intro">上传仓库库存的盘点数据</div>
  </div>
 </div>
</div>

.box-uploadDownload {
    position: relative;  /*绝对定位*/
    width: 98%;
    height: 320px;
    padding-top: 100px;
    border: 1px dashed rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
    transition: all 0.3s;
}

.box-file input {
    position: absolute;  /*相对定位*/
    left: 0;
    top: 0;
    width: 100%;
    height: 320px;
    font-size: 0;
    opacity: 0;      /*隐藏*/
    filter: alpha(opacity=0); /*隐藏*/
    cursor: pointer;
}