CSS自定義input file

使用input file是很方便的選擇文件的方式，但是默認的樣式并不符合我們的需求，因此我們可以使用CSS來自定義input file。

首先，將input type="file"包裹在label標簽中，并且讓label標簽具有可點擊性，如下所示：

<label for="file-upload">選擇文件</label>
<input id="file-upload" type="file">

然后，我們使用CSS來隱藏文件上傳框的默認樣式，如下所示：

input[type="file"] {
display: none;
}

接著，我們將自定義的樣式應用到label標簽上，這里我們以border樣式為例：

label[for="file-upload"] {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}

最后，我們使用JavaScript來獲取選擇的文件名，并將其顯示在頁面上：

let fileUpload = document.getElementById("file-upload");
let fileName = document.getElementById("file-name");
fileUpload.addEventListener("change", function() {
fileName.textContent = this.value.split("\\").pop();
});

完整的代碼如下：

<label for="file-upload">選擇文件</label>
<input id="file-upload" type="file">
<span id="file-name"></span>
input[type="file"] {
display: none;
}
label[for="file-upload"] {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
let fileUpload = document.getElementById("file-upload");
let fileName = document.getElementById("file-name");
fileUpload.addEventListener("change", function() {
fileName.textContent = this.value.split("\\").pop();
});