首先，<input type = "file">的預設樣式是這樣的：

預設的樣式直接放到網頁中總覺得不太協調，於是我在網上查詢它的美化方法。大方向上基本是用CSS美化，但細化到具體的美化方式則多種多樣。在眼花繚亂之下找到了這篇文章：修改 input type=file 的樣式的最簡單方法

什麼？最簡單方法？我來看一看你有多簡單。

以下是作者的思路：

1、重寫一個新的樣式 ；

2、將預設的樣式設為display:none，即設為不可見 ；

3、在js裡呼叫：當點選新樣式的時候，呼叫這個input

的點選事件。

 實現方式：

這裡我和該文作者一樣，使用css+js（jquery）的方式美化。

HTML部分 使用一個div，把一個<button>和<input type = "file">包裹起來：

    <div id="button">
        <button id="upload">上傳圖片</button> 
        <input type="file" id="fileul">
    </div>

css部分：

#fileul{
     display: none;
}
 

js部分 這裡我同樣使用了jquery：

$(document).ready(function(){
   $('#upload').click(function(){ 
       $('#fileul').click()
   });
});

最終效果：

最終效果呈現為一個按鈕，點選後觸發對input的點選事件，彈出檔案選擇的對話方塊。