我们在css中修改file的表单样式是一件比较麻烦的事情，最近学习到一种方法，隐藏表单的样式，添加一个div，div添加事件，触发表单事件，原理上等同于修改了file的样式。
另外写一个按钮的样式，然后将自己写的按钮和这个默认的样式的定位改为重合，并将默认的按钮设置opacity:0，即设置透明度为完全透明，这样就可以在表面上是点击自己定义的样式，而实际上是点击input这个按钮。
1、重写一个新的样式
2、将默认样式设置display:none;，即设为不可见
3、在js里调用：当点击新样式的时候，调用这个input的点击事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上传</title> <style> .bg { display: flex; justify-content: center; align-items: center; width: 1920px; height: 1080px; background: url('./bg.jpg')no-repeat center / 100%; } .file1 { display: none; } .img_one { width: 300px; height: 100px; } </style> <script src="../jquery-1.11.1.min.js"></script></head><body> <div class="bg"> <img src="./banner3.png" alt="" class="img_one"> <input type="file" class="file1"> <button>提交</button> </div> <script> $(document).ready(function () { $('.img_one').click(function () { $('.file1').click() }) }) </script></body></html>
代码如上
实际如下
提交按钮是另写 有兴趣可以同理，不过button比较好修改
