最近在公司做項目碰到個需求，就是要做一個上傳圖片的功用，很簡樸的一個功用，然則在完成歷程當中卻碰到了許多坑，在這裏總結一下，讓碰到此題目的朋儕也能夠有更多挑選，以下所述純屬個人看法，若有差別的要領，迎接在批評區留言交換，配合進步！
       剛最先我的主意是直接用定位（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動態綁定的固然，上面的純屬個人看法，假如有更好的看法迎接在批評區留言議論~