今天我們來討論一個非常常見的需求，即如何使用Ajax上傳文件并顯示上傳中的狀態。

在Web開發中，文件上傳是一個非常常見的功能。例如，我們可以想象一個在線圖片分享網站，用戶可以通過該網站上傳自己的照片。當用戶點擊上傳按鈕后，我們希望能夠實時地顯示文件上傳的進度和狀態，以方便用戶知道上傳的進展情況。

在傳統的文件上傳過程中，當用戶點擊上傳按鈕后，瀏覽器會發送一個HTTP POST請求，將文件數據發送到服務器。這個過程比較耗時，用戶需要等待上傳完成才能繼續操作。然而，使用Ajax可以改變這種方式，實現異步上傳文件。同時，由于Ajax的異步特性，我們也可以方便地實時顯示上傳過程中的狀態。

// HTML
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data"><input type="file" name="file" id="file" /><input type="button" value="Upload" onclick="uploadFile();" /></form>// JavaScript
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.open('POST', '/upload', true);
xhr.upload.onprogress = function (e) {
var percentage = (e.loaded / e.total) * 100;
console.log(percentage);
document.getElementById('progress').innerHTML = '上傳進度：' + percentage.toFixed(2) + '%';
};
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
document.getElementById('progress').innerHTML = '上傳完成！';
} else {
console.log('上傳失敗');
}
};
xhr.send(formData);
}

在上面的代碼中，我們首先定義了一個HTML表單，其中包含了一個文件輸入框和一個上傳按鈕。當用戶點擊上傳按鈕時，會觸發JavaScript中的uploadFile函數。

在uploadFile函數中，我們首先通過document.getElementById獲取到文件輸入框的引用，并獲取到用戶選擇的文件對象。然后，我們創建一個FormData對象，并使用append方法將文件對象添加到FormData中。

var fileInput = document.getElementById('file');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

接下來，我們創建一個XMLHttpRequest對象，并使用open方法指定請求的方法、URL和是否使用異步方式。然后，我們可以監聽xhr對象的upload.onprogress事件，該事件會在文件上傳過程中不斷觸發，我們可以獲取到當前上傳的字節數和總字節數，并計算出上傳進度的百分比。通過修改頁面中的元素，我們可以實時地顯示上傳進度。

xhr.upload.onprogress = function (e) {
var percentage = (e.loaded / e.total) * 100;
console.log(percentage);
document.getElementById('progress').innerHTML = '上傳進度：' + percentage.toFixed(2) + '%';
};

最后，我們通過send方法將FormData對象發送到服務器，并通過xhr對象的onload事件監聽服務器的響應。如果上傳成功，我們可以在頁面中顯示上傳完成的狀態；如果上傳失敗，我們可以在控制臺輸出錯誤信息供調試。

xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
document.getElementById('progress').innerHTML = '上傳完成！';
} else {
console.log('上傳失敗');
}
};

通過以上代碼，我們實現了使用Ajax上傳文件并顯示上傳中的狀態的功能。用戶在上傳文件時，可以實時地看到上傳進度的百分比，以及上傳完成的狀態反饋，提升了用戶體驗。

綜上所述，Ajax為文件上傳過程提供了更好的用戶體驗。借助Ajax的異步特性，我們可以實時地顯示上傳進度和狀態，讓用戶了解文件上傳的進展。