轉自 :https://blog.csdn.net/qq_32623363/article/details/80878408 

1、重寫一個新的樣式 
2、將預設樣式設定display:none;，即設為不可見 
3、在js裡呼叫：當點選新樣式的時候，呼叫這個input的點選事件

這就完啦！！！何必還要多此一舉將兩個東西設為完全重合呢，寫新樣式就完全可以放飛自我啦

下面附上簡單的程式碼吧，我的js用了jquery框架

html

<div class="head-img">
    <img src="./imgs/王小波.jpg" id="my-img">          
    <input type="file" id="img-upload"/>
</div>

css

.head-img{
    text-align: center;
}

#img-upload{
    display: none;
}

js/jquery

$(document).ready(function(){
    $('#my-img').click(function(){
        $('#img-upload').click();
    });

});