最近在公司做项目遇到个需求，就是要做一个上传图片的功能，很简单的一个功能，但是在实现过程中却遇到了很多坑，在这里总结一下，让碰到此问题的朋友也可以有更多选择，以下所述纯属个人观点，如有不同的方法，欢迎在评论区留言交流，共同进步！???????刚开始我的想法是直接用定位（position）+透明度（opacity）直接来实现，实现的过程很顺利，但是最后却发现了一个问题，什么问题呢，很简单，就是用户体验的问题，我想给这个按钮加一个鼠标移入变手的效果，却发现始终有一部分不会生效，检查代码发现原来是因为上传文件的按钮不会应用这个样式，那我我就想把他移出到按钮之外的位置，但是这样就会出现按钮超宽的问题，即使在看不见的部位也能点到，所以我就这个问题开始了一些实验，在网上也找过方法，发现都不是我想要的，最后决定自己来写一写，不研究不知道，一研究还发现了不少方法能实现，我总结除了三种实现的方法以及实现思路，希望对大家有帮助，如果还有其他的方法，请在评论区留言，共同学习，好了废话不多说，贴代码：<!--html结构--><!--第一种方法:通过定位+透明度来实现（不推荐）--><div class="first"> 第一种方法 <button>上传图片</button> <input type="file"></div>/*css代码*//*第一种的按钮样式*/.first{ position: relative; height: 30px; line-height: 30px;}.first button,.first input{ position: absolute; left: 85px; top: 0; width: 100px; height: 30px; color: #fff; background-color: skyblue; border-radius: 5px; border: none; outline: none; cursor: pointer;}.first input{ opacity: 0; width: 185px; left: 0;/*这里是为了让cursor效果在按钮内完全生效，但是弊端就是宽度增加，在按钮左侧看不见的位置也能点击到*/}<!--html结构--><!--第二种方法：通过label的关联属性来实现--><div class="item"> 第二种方法 <label for="file1">上传图片</label> <input type="file" id="file1"></div>/*css代码*//*第二种的按钮样式*/.item label{ display: inline-block; width: 100px; height: 30px; text-align: center; color: #fff; line-height: 30px; background-color: skyblue; border-radius: 5px; cursor: pointer;}.item input{ display: none;}<!--html结构--><!--第三种方法:通过js事件绑定来实现（推荐）--><div class="item"> 第三种方法 <button class="btn">上传图片</button> <input type="file" id="file"></div>/*css代码*//*第三种的按钮样式*/.item button{ width: 100px; height: 30px; color: #fff; background-color: skyblue; border-radius: 5px; border: none; outline: none; cursor: pointer;}.item input{ display: none;}// js代码// 第三种方法document.querySelector('.btn').addEventListener('click',function () { document.querySelector('#file').click();});上面三种方法的样式都是一样的，如图：总结上述三种方法比较推荐第三种，第一种不推荐的理由：???????一、样式代码相对较多，并且对于cursor，file的按钮不会应用样式，所以需要让他宽度更宽才行，这样就会出现在不可见区域也能点击上传的bug（目前没找到解决办法）。???????二、结构固定。???????三、需要使用定位。第二种不推荐的理由：???????局限性：限制了元素，只能使用label，且只能使用id来进行关联，id作为唯一标识，页面上定义的id越少越好，想要在同一页面使用多个就需要定义多个id。第三种推荐的理由：???????一、结构：样式简单，结构清晰???????二、适用范围：不限制元素的使用，因为是用js动态绑定的当然，上面的纯属个人观点，如果有更好的观点欢迎在评论区留言讨论~
