Ajax（Asynchronous JavaScript and XML）技術可以使網頁與服務器進行異步通信，實現在頁面不刷新的情況下更新數據。本文將介紹如何使用Ajax上傳文件并顯示上傳進度條。通過這種方式，用戶可以清晰地了解文件上傳的進度，提高用戶體驗。通過以下示例，我們將展示使用Ajax上傳文件并顯示進度條的方法。

首先，我們需要引入jQuery庫，因為 jQuery 提供了豐富的Ajax功能。我們還需要在HTML頁面中添加一個文件上傳表單。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput" />
<input type="button" value="上傳" onclick="uploadFile()" />
</form>

上述代碼創建了一個表單，其中包含一個文件上傳輸入框和一個上傳按鈕。當用戶點擊上傳按鈕時，將調用JavaScript函數uploadFile()。

接下來，我們需要實現uploadFile()函數，該函數將使用 Ajax 技術上傳文件。我們需要使用FormData對象將文件數據附加到Ajax請求中。

function uploadFile() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log('上傳進度：' + percent + '%');
}
}, false);
return xhr;
},
success: function(response) {
console.log('上傳成功！');
},
error: function() {
console.log('上傳失敗！');
}
 })；
}

在上述代碼中，我們首先獲取文件輸入框中用戶選擇的文件（這里只選擇了第一個文件），然后創建一個FormData對象，并使用append()方法將文件添加到FormData中。接下來，使用$.ajax()函數發送POST請求到服務器的upload.php文件。為了支持文件上傳的進度顯示，我們使用了xhr.upload對象的progress事件監聽器。該事件在上傳過程中會被觸發，我們可以根據已上傳和總文件大小計算并顯示上傳進度。

最后，我們需要在服務器端實現upload.php文件來處理文件上傳請求。以下是一個簡單的示例：

<?php
$file = $_FILES['file'];
$targetDir = 'uploads/';
$targetFile = $targetDir . time() . '_' . $file['name'];
if (move_uploaded_file($file['tmp_name'], $targetFile)) {
echo '文件上傳成功！';
} else {
echo '文件上傳失敗！';
}
?>

在上述代碼中，我們首先通過$_FILES全局變量獲取上傳的文件數據。然后，我們指定一個目標目錄，使用move_uploaded_file()函數將文件移動到目標目錄中。根據移動的結果返回上傳的成功或失敗消息。注意，$targetDir變量可以根據實際情況進行修改，以便設置您自己的目標目錄。

通過上述步驟，我們成功實現了使用Ajax上傳文件并顯示上傳進度條的功能。用戶通過選擇文件并點擊上傳按鈕，文件將以異步的方式上傳到服務器，同時頁面將實時顯示上傳進度。這種方式可以大大提升用戶體驗，尤其是在上傳較大文件時。