在現代Web應用程序中，上傳文件是一個常見的功能。對用戶而言，上傳的文件越大，上傳進度條越重要，因為會讓他們了解其上傳進度。在JavaScript中，我們可以使用AJAX以及瀏覽器的File API來實現上傳進度條。本文將深入解析JavaScript上傳進度條的實現方式。

File API介紹

File API允許我們在對文件進行操作之前，預覽或讀取文件并對其進行操作。例如，我們可以使用File API檢查文件類型，并對其進行驗證，或者讀取文件內容并將其提供給用戶進行預覽。

let fileInput = document.getElementById("fileInput");
let file = fileInput.files[0];
console.log(file.type); // prints "image/jpeg"
console.log(file.size); // prints the size of the file in bytes

上面的代碼演示了如何使用File API選擇文件并獲取其類型和大小。

使用XHR發送AJAX請求

在瀏覽器中，我們可以使用XMLHttpRequest（XHR）對象來發送AJAX請求。在上傳文件時，我們可以使用XHR對象來發送文件。

let xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
// 計算上傳的百分比
let percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
xhr.send(file);

上面的代碼演示了如何使用XHR對象發送上傳請求，并在上傳進度改變時監控進度。

創建進度條

我們可以使用HTML和CSS創建進度條元素，并根據上傳進度動態更新進度條。例如：

<div id="uploadProgressBar"></div>
#uploadProgressBar {
width: 100%;
height: 20px;
border: 1px solid black;
}
function updateProgressBar(percentComplete) {
let progressBar = document.getElementById("uploadProgressBar");
progressBar.style.width = percentComplete * 100 + "%";
}

上面的代碼演示了如何使用HTML和CSS創建進度條，并且在上傳進度變化時，動態更新進度條。

總結

JavaScript上傳進度條是一個很有用的功能，允許用戶在文件上傳過程中看到上傳進度。在本文中，我們了解了如何使用File API來操作文件，使用XHR對象發送AJAX請求以及如何創建和更新JavaScript上傳進度條。