在現代的Web開發中，Ajax技術已經成為不可或缺的一部分。通過Ajax，我們可以實現無需刷新頁面的數據交互。當我們需要通過表單提交文件時，Ajax同樣提供了便捷的解決方案。通過使用Ajax提交表單文件，我們可以實現實時的文件上傳和顯示進度信息等功能。本文將介紹如何使用Ajax提交表單文件，并通過實際的例子來進一步說明。

在開始之前，我們先來看一個簡單的例子。假設我們有一個包含文件上傳功能的表單，用戶可以選擇并上傳文件。傳統的方式是用戶選擇文件后，點擊提交按鈕，整個頁面會進行刷新，并將文件上傳到服務器。然而，使用Ajax，我們可以實現無需刷新頁面的文件上傳。當用戶選擇文件后，文件會通過Ajax提交到服務器，同時頁面不會進行刷新，用戶可以立即看到上傳的進度和結果。

<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput">
<input type="submit" value="上傳">
</form>
<script>
// 使用Ajax提交表單
document.getElementById("uploadForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單默認提交行為
var formData = new FormData(this);
// 創建Ajax請求對象
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
console.log("上傳進度：" + percent + "%");
}
};
xhr.onload = function() {
if (xhr.status === 200) {
console.log("上傳成功！");
} else {
console.log("上傳失敗！");
}
};
xhr.send(formData);
});
</script>

在上面的例子中，我們首先獲取了一個具有ID為"uploadForm"的表單元素，并通過addEventListener方法監聽了它的submit事件。當表單被提交時，我們使用event.preventDefault()方法阻止了表單的默認提交行為，從而避免頁面刷新。

接下來，我們創建了一個FormData對象，收集了表單中的數據。FormData對象可以通過添加鍵值對的方式來收集數據，我們傳入this代表表單本身，即可自動獲取表單中所有的字段和值。然后，我們創建了一個XMLHttpRequest對象，并使用open方法指定了請求的方法和URL。在這里，我們使用了POST請求，并將文件上傳URL設置為"/upload"。這個URL需要根據實際情況進行修改。

在xhr.upload.onprogress方法中，我們監聽了上傳的進度。通過event.loaded和event.total的值，我們可以計算出上傳進度的百分比，并在控制臺中進行輸出。這樣用戶在上傳文件的過程中，可以實時了解上傳的進度。

最后，我們使用xhr.onload方法來處理上傳完成后的響應。如果xhr的狀態碼為200，表示上傳成功；否則，表示上傳失敗。在這里，我們只是簡單地在控制臺中輸出了上傳狀態，你可以根據實際情況進行相應的操作。

通過這個例子，我們可以看到通過Ajax提交表單文件是如此的簡單和便捷。使用Ajax可以避免頁面的刷新，并實現實時的上傳進度及結果的展示，大大提升了用戶體驗。當然，在實際應用中，我們還可以通過Ajax向服務器發送其他的參數，如用戶ID、文件類型等，從而實現更加豐富的功能。

總結起來，使用Ajax提交表單文件可以實現無需刷新頁面的文件上傳功能。通過監聽表單的submit事件，阻止默認提交行為，使用FormData對象收集表單數據，并通過XMLHttpRequest對象進行文件上傳。同時，我們可以通過監聽上傳進度和處理上傳結果，實現實時的上傳進度和結果展示。通過這種方式，我們可以為用戶帶來更加流暢和便捷的文件上傳體驗。