AJAX是一種流行的前端技術，可以通過異步請求與服務器進行數據交換，從而實現頁面無刷新更新。文件上傳是Web開發中常見的需求之一。傳統的文件上傳需要刷新整個頁面，用戶體驗較差。本文將介紹如何使用AJAX異步提交文件上傳，實現更好的用戶體驗。

在傳統的文件上傳中，用戶選擇文件后，需要點擊提交按鈕，并等待頁面刷新，才能完成文件上傳。如果用戶選擇錯誤的文件，或者文件過大導致上傳時間過長，用戶體驗將會非常糟糕。而通過使用AJAX異步提交文件上傳，可以在頁面無刷新的情況下實現文件上傳，提高用戶體驗。下面通過一個實際的例子來說明如何使用AJAX異步提交文件上傳。

// HTML代碼
<form id="fileUploadForm">
<input type="file" id="fileInput" />
<button type="button" onclick="uploadFile()">上傳文件</button>
</form>
<div id="progressBar"></div>
// JavaScript代碼
function uploadFile() {
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append("file", file);
xhr.upload.addEventListener("progress", function(event) {
var progress = Math.round((event.loaded / event.total) * 100);
document.getElementById("progressBar").innerHTML = "上傳進度: " + progress + "%";
});
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("progressBar").innerHTML = "上傳成功！";
}
};
xhr.open("POST", "/upload", true);
xhr.send(formData);
}

上述代碼中，我們首先在HTML中創建一個表單和一個文件選擇輸入框以及一個上傳按鈕。用戶選擇文件后，點擊上傳按鈕，調用JavaScript函數uploadFile()來上傳文件。在uploadFile()函數中，我們首先獲取到用戶選擇的文件，并利用XMLHttpRequest對象創建一個異步請求。我們將文件添加到FormData對象中，并監聽上傳過程中的progress事件，以便顯示上傳進度。最后，我們發送異步請求，將文件上傳到服務器上。

通過這種方式，當用戶選擇文件后，可以看到上傳進度條動態更新，并且頁面不會刷新。用戶可以繼續進行其他操作，而無需等待整個文件上傳過程完成。當文件上傳完成后，頁面會顯示“上傳成功”的提示。這就是使用AJAX異步提交文件上傳的優勢，可以節省用戶的等待時間，提高用戶體驗。