現在的網頁應用越來越多地使用ajax來實現文件上傳功能。ajax文件上傳可以實現頁面不刷新的情況下上傳文件，并且可以顯示上傳進度。在本文中，我們將探討如何使用ajax實現文件上傳并顯示上傳進度。

在傳統的文件上傳方式中，用戶選擇文件后，需要點擊提交按鈕，然后等待頁面刷新，上傳文件過程中用戶無法知道上傳進度。而使用ajax上傳文件，用戶可以實時看到上傳進度，無需頁面刷新。

首先，我們需要一個表單來供用戶選擇文件。為了使用ajax上傳文件，我們將form的action屬性設為一個處理文件上傳的文件，同時將form的enctype屬性設為“multipart/form-data”，以支持文件上傳。

<form id="fileForm" action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="file" id="file"><br><input type="button" value="上傳" onclick="uploadFile()"></form>

接下來，我們編寫JavaScript函數uploadFile()來處理文件上傳。該函數中使用了FormData對象來構建一個包含文件的表單數據對象。然后，通過XMLHttpRequest對象的upload屬性來監聽上傳進度，并將進度顯示在頁面上。

function uploadFile() {
var fileInput = document.getElementById('file');
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
document.getElementById('progress').innerHTML = Math.round(percent) + '%';
}
};
xhr.open("POST", "upload.php", true);
xhr.send(formData);
}

在頁面上，我們添加一個用于顯示上傳進度的元素。這里使用一個簡單的0%元素來顯示上傳進度。

當用戶點擊上傳按鈕時，JavaScript函數uploadFile()會被調用。該函數首先獲取用戶選擇的文件，然后使用FormData對象將文件添加進表單數據。接著，創建XMLHttpRequest對象并監聽上傳進度。在進度監聽函數中，通過event.loaded和event.total屬性計算出上傳進度的百分比，并將其顯示在頁面上。

上傳進度顯示的效果可以根據實際需求進行美化。例如，可以使用進度條來展示上傳進度。在CSS中定義一個進度條樣式，并在頁面上添加一個顯示進度的元素。

#progress {
width: 200px;
height: 20px;
border: 1px solid #ccc;
}
#progress-bar {
width: 0;
height: 100%;
background-color: #4CAF50;
}

在JavaScript中，更新進度條的寬度即可實現上傳進度的展示。

xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
document.getElementById('progress-bar').style.width = Math.round(percent) + '%';
}
};

通過上述步驟，我們成功地實現了使用ajax上傳文件，并在頁面上顯示上傳進度的功能。當用戶選擇文件并點擊上傳按鈕后，上傳進度將實時顯示在頁面上，給用戶一個直觀的上傳體驗。

總結來說，通過ajax上傳文件可以實現頁面不刷新的文件上傳，并可以顯示上傳進度。我們可以使用FormData對象來構建包含文件的表單數據，使用XMLHttpRequest對象的upload屬性來監聽上傳進度，并通過JavaScript來更新頁面上的進度條或百分比顯示。這樣，用戶可以方便地上傳文件，并實時了解上傳進度。