点击图片上传文件

来源：互联网发布：linux top 后如何退出编辑：程序博客网时间：2024/05/29 11:03

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

0 0