JavaScript上傳文件時，我們通常需要知道上傳的進度百分比。這有助于我們更好地了解上傳的狀態并及時做出響應。在本文中，我們將學習如何使用JavaScript上傳文件，并展示如何實時跟蹤上傳進度百分比。
首先，讓我們看一下如何上傳文件。我們可以使用HTML5中的FormData對象來實現文件上傳，該對象支持異步上傳，可實現上傳文件的實時跟蹤。以下是一個簡單的上傳表單示例：

html
<form action="upload.php" method="post" enctype="multipart/form-data" id="uploadForm">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>

在上面的代碼中，我們創建了一個表單，將其action屬性設置為上傳的處理程序的URL，并使用enctype屬性將其類型設置為multipart/form-data，以便能夠上傳文件。我們還添加了一個文件選擇器用于選擇要上傳的文件。
現在，讓我們看一下如何使用JavaScript實時跟蹤上傳進度。我們將使用XMLHttpRequest對象來執行異步上傳并獲取上傳狀態。以下是一個示例代碼：

javascript
function uploadFile() {
var fileInput = document.getElementById("fileToUpload");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("fileToUpload", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.upload.addEventListener("progress", function(e) {
var percentComplete = Math.round(e.loaded / e.total * 100);
console.log(percentComplete + "%");
}, false);
xhr.send(formData);
}

在上面的代碼中，我們首先獲取文件輸入元素以訪問選擇的文件。然后，我們使用FormData對象將選擇的文件作為參數添加到上傳請求中。接下來，我們創建一個XMLHttpRequest對象，并將其open方法的第一個參數設置為POST，并將其第二個參數設置為上傳處理程序的URL。我們還在XHR對象上添加了一個progress事件監聽器來跟蹤上傳進度。
在progress事件響應函數內部，我們獲得e.loaded和e.total屬性的值以計算上傳進度百分比。最后，我們將百分比打印到控制臺中。現在運行該函數，選擇一個文件并開始上傳。此時，您將能夠在控制臺中實時跟蹤上傳進度百分比。
總之，JavaScript上傳文件并實時跟蹤上傳進度是一項重要的任務。我們可以使用HTML5中的FormData對象和XMLHttpRequest對象來實現異步文件上傳，并使用XHR對象的progress事件跟蹤上傳進度百分比。這使得我們可以在上傳期間獲得實時的反饋并做出相應的響應。