前端入坑紀(jì) 29
今天來(lái)個(gè)關(guān)于如題設(shè)定的內(nèi)容更新莺掠，簡(jiǎn)單的總結(jié)常用的兩種方式（確實(shí)是兩種，我沒(méi)數(shù)錯(cuò)闯冷，請(qǐng)往下看）砂心。
炒雞簡(jiǎn)單的效果圖
OK，first things first蛇耀！項(xiàng)目鏈接
HTML 結(jié)構(gòu)
<h2>方式一</h2>
<div class="way1">
<input type="file">
<a href="javascript:;">文件上傳</a>
</div>
<h2>方式二 </h2>
<div class="way2">
<!--label包裹input辩诞，點(diǎn)了label相當(dāng)于點(diǎn)了input-->
<label>文件上傳<input type="file" hidden></label>
</div>
<h2>方式三 </h2>
<div class="way3">
<!--這個(gè)算是上面的變種，label 加for屬性纺涤，指向input的id-->
<label for="upfls">文件上傳</label><input id="upfls" type="file" hidden>
</div>
用三個(gè)div分別包裹要用到的文件上傳按鈕和相應(yīng)的元素译暂，很簡(jiǎn)單的構(gòu)成。
CSS結(jié)構(gòu)
a {
text-decoration: none;
color: #333;
}
// 給每個(gè)div定義樣式撩炊，背景啊外永，寬高之類
.way1,
.way2,
.way3 {
width: 50%;
position: relative;
background: #ededed;
border-radius: 4px;
height: 45px;
line-height: 45px;
}
// 第一種是絕對(duì)定位，把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這個(gè)input的老搭檔伯顶，包裹input file
.way2 label,
.way3 label {
display: block;
width: 100%;
height: 45px;
text-align: center;
}
所以就是這樣了，今天木有js呛踊，輕松一下砾淌！
好了，到此谭网，本文告一段落汪厨！感謝您的閱讀！祝你身體健康愉择，闔家幸福劫乱！
