前端入坑紀 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，輕松一下！
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
