HTML中的選擇文件按鈕是一種非常重要的功能,它可以讓用戶上傳文件并將其發送到服務器上。在HTML中,選擇文件按鈕可以通過使用“input”標簽和“type = file”屬性來實現。下面是一些示例代碼,用于設置選擇文件按鈕:
在上面的代碼中,我們設置了一個選擇文件按鈕,并使用CSS來隱藏原始的input標簽。相反,我們使用一個標簽來替代它,并在用戶點擊時觸發選項對話框。一旦用戶選擇了文件,JavaScript代碼段將獲取文件名并將其記錄到控制臺中。 總之,選擇文件按鈕是一種非常實用的功能,可以讓用戶上傳文件并將其發送到服務器。它可以通過使用“input”標簽和“type = file”屬性來實現,并且可以使用CSS和JavaScript進行自定義以提高用戶體驗。HTML代碼:
CSS代碼:
input[type="file"] { display: none; } input[type="file"] + label { background-color: #fff; border: 1px solid #ccc; padding: 8px 16px; font-weight: bold; cursor: pointer; }JavaScript代碼:
const fileUploader = document.getElementById("uploadFile"); const chooseFileButton = document.querySelector("label[for='uploadFile']"); chooseFileButton.addEventListener("click", () =>{ fileUploader.click(); }); fileUploader.addEventListener("change", () =>{ const fileName = fileUploader.value.split("\\").pop(); console.log(fileName); });
上一篇html 頂部懸浮框代碼
下一篇html 語音機器人代碼