前端入坑纪 29
今天来个关于如题设定的内容更新，简单的总结常用的两种方式（确实是两种，我没数错，请往下看）。
炒鸡简单的效果图
OK，first things first！项目链接
HTML 结构
<h2>方式一</h2>
<div class="way1">
<input type="file">
<a href="javascript:;">文件上传</a>
</div>
<h2>方式二 </h2>
<div class="way2">
<!--label包裹input，点了label相当于点了input-->
<label>文件上传<input type="file" hidden></label>
</div>
<h2>方式三 </h2>
<div class="way3">
<!--这个算是上面的变种，label 加for属性，指向input的id-->
<label for="upfls">文件上传</label><input id="upfls" type="file" hidden>
</div>
用三个div分别包裹要用到的文件上传按钮和相应的元素，很简单的构成。
CSS结构
a {
text-decoration: none;
color: #333;
}
// 给每个div定义样式，背景啊，宽高之类
.way1,
.way2,
.way3 {
width: 50%;
position: relative;
background: #ededed;
border-radius: 4px;
height: 45px;
line-height: 45px;
}
// 第一种是绝对定位，把input file按钮放在最上层，然后全透明
.way1 input {
display: block;
width: 100%;
height: 45px;
opacity: 0;
position: absolute;
z-index: 3;
top: 0;
left: 0;
}
.way1 a {
display: block;
width: 100%;
position: absolute;
z-index: 2;
top: 0;
left: 0;
text-align: center
}
// 第二种就是用label这个input的老搭档，包裹input file
.way2 label,
.way3 label {
display: block;
width: 100%;
height: 45px;
text-align: center;
}
所以就是这样了，今天木有js，轻松一下！
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
