前端入坑紀(jì) 29

今天來個(gè)關(guān)于如題設(shè)定的內(nèi)容更新，簡(jiǎn)單的總結(jié)常用的兩種方式（確實(shí)是兩種，我沒數(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，輕松一下！

好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！