AJAX（Asynchronous JavaScript and XML）是一種用于 Web 開發的技術，它允許我們向服務器發送異步請求并在不重新加載整個頁面的情況下更新頁面的一部分。通過 AJAX，我們可以以更快、更流暢的方式與服務器進行交互。

在 Web 開發中，有時候我們需要向服務器提交文件，比如圖片、視頻或文檔等。使用 AJAX 和一些適當的技術，可以在不刷新整個頁面的情況下實現文件上傳功能。

在下面的示例中，我們將展示如何使用 AJAX 提交文件至服務器，并實時顯示文件上傳的進度。

function uploadFile(file) {
var xhr = new XMLHttpRequest();
// 創建 FormData 對象并將文件添加進去
var formData = new FormData();
formData.append('file', file);
// 監聽 xhr 的上傳進度
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded / event.total) * 100);
console.log('上傳進度：' + percentage + '%');
}
});
// 定義請求的方法、URL 和是否異步
xhr.open('POST', '/upload', true);
// 發送請求
xhr.send(formData);
}

首先，我們創建一個 XMLHttpRequest 對象（xhr）。然后，我們創建一個 FormData 對象（formData），并將要上傳的文件添加進去。formData 的 append 方法接受兩個參數，第一個參數是字段的名稱，第二個參數是要上傳的文件對象。在這個示例中，我們假設文件的字段名稱是 'file'。

接下來，我們監聽 xhr 的 upload 事件，以便實時獲取上傳的進度。事件對象中的 loaded 屬性表示已經上傳的字節數，total 屬性表示文件的總字節數。通過這兩個屬性，我們可以計算出上傳的百分比。

<input type="file" id="fileInput" onchange="handleFileUpload()">
<script>
function handleFileUpload() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
uploadFile(file);
}
</script>

在 HTML 中，我們通過 input 元素的 type 屬性設置為 'file' 來創建一個文件選擇框。我們還給 input 元素設置了一個 id，以便可以通過 JavaScript 獲取到該元素。

然后，我們編寫一個 JavaScript 函數 handleFileUpload。在這個函數中，我們首先通過 document.getElementById 獲取到 fileInput 元素，然后通過 files 屬性獲取到選擇的文件對象。在這個示例中，我們假設只選擇了一個文件。

最后，我們將文件對象傳遞給 uploadFile 函數進行上傳。

使用上面的代碼和技術，你可以輕松地實現 AJAX 文件上傳的功能。通過監聽上傳進度，你還可以實時地展示上傳的進度，給用戶更好的體驗。