CSS的典型功能之一就是文件上傳，這也是網站和應用程序中很常見的功能之一。通過上傳文件，我們可以輕松實現用戶上傳圖片、文檔和其他文件的操作。下面我們就來介紹一下如何使用CSS實現文件上傳功能。

//HTML代碼
<input type="file" name="file" id="fileUpload">

首先我們需要在HTML代碼中添加一個file類型的input元素，如上述代碼所示。這是一個默認樣式的文件上傳按鈕，可以通過CSS自定義樣式。

/*CSS代碼*/
#fileUpload {
display: none;   /*隱藏原先的input*/
}
.custom-upload-btn {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
.custom-upload-btn:hover {
background-color: #3e8e41;
}

接下來，我們需要自定義一個上傳按鈕的樣式，這個按鈕會替代原先那個默認的上傳按鈕。上述代碼中，我們首先給原先的input賦予了樣式display:none，以此隱藏它。之后，我們添加了一個class名為custom-upload-btn的元素，并給它自定義了樣式，包括按鈕的背景顏色、文本顏色、內邊距、邊框半徑和鼠標懸停狀態下的樣式等。

//JavaScript代碼
const fileUpload = document.getElementById('fileUpload');
const customUploadBtn = document.querySelector('.custom-upload-btn');
customUploadBtn.addEventListener('click', () =>{
fileUpload.click();
});
fileUpload.addEventListener('change', () =>{
console.log('File uploaded successfully!');
});

最后，我們需要使用JavaScript來實現上傳文件的功能。上述代碼中，我們首先獲取了原先隱藏的input元素和自定義的上傳按鈕。在自定義的上傳按鈕上添加了點擊事件監聽器，當按鈕被點擊時，會自動模擬input元素的點擊事件，彈出文件選擇窗口。之后，我們監聽了input元素的change事件，該事件會在文件上傳后觸發。在這個事件處理函數中，你可以執行所需的操作，比如將文件上傳到服務器等。

這就是使用CSS、HTML和JavaScript實現文件上傳功能的簡單方法。通過這種方式，你可以自定義樣式更好看的上傳按鈕，并實現文件上傳、保存和其他處理操作。