点击图片上传文件

最近一个项目需要做点击图片实现上传、研究了一下 input 的 file 属性、一样和网上看到的那样会考虑到样式太过难看、所以选择把按钮换成图片、

看到了一些例子是用脚本之类实现的、感觉有点复复杂、所以做了一个单纯用 html 和 css 实现的方案、当然还有预览功能应该还是要用到JS 的、我这个就无法实现了、

原理是 做一个背景图

可以看到这是两个等下要用到的按钮、而我要做的就是把 input 的位置和大小调到这里、然后设置不透明度为0、

<div class="XX" style="background-image:url(IMG/IDBC.png);"> 
          <input type="file" name="browse2" style="opacity:0;background-image:url(IMG/ID1.png); background-color:#000; width:255px;height:165px; overflow:hidden;" />
          <!--<img src="IMG/ID1.png" title="点击上传图片"></img>-->
          <p>身份证正面</p>
         <input type="file" name="browse2" style="opacity:0;background-image:url(IMG/ID1.png); background-color:#000; width:255px;height:165px; overflow:hidden;" />
         <!-- <img src="IMG/ID2.png" title="点击上传图片"></img>-->
          <p>身份证背面</p>
      </div>

opacity:0;  这时候按钮是隐藏的、但是点击图片所在位置就可以实现打开上传功能、实现效果：