点击图片上传文件

最近一个项目需要做点击图片实现上传、研究了一下 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;  这时候按钮是隐藏的、但是点击图片所在位置就可以实现打开上传功能、实现效果:





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值