在Web開發中，我們經常需要上傳文件，而且需要獲取上傳文件的相關信息。傳統的方式是通過提交表單來上傳文件，但這種方式會導致頁面刷新，用戶體驗差。而使用Ajax來上傳文件，能夠實現異步上傳，并能獲取上傳文件的信息，大大提升了用戶體驗。

舉例來說，假設我們正在開發一個圖片上傳網站。用戶可以選擇本地的圖片文件，并點擊提交按鈕進行上傳。在傳統的方式中，用戶需要等待頁面刷新，上傳完成后才能獲取到上傳文件的信息。而通過使用Ajax，我們可以實時顯示上傳文件的進度，并能夠獲取到文件的類型、大小等信息，以便后續進行顯示或者處理。

下面我們來看看具體的實現代碼：

// HTML代碼
<input type="file" id="fileInput" />
<button id="uploadButton">上傳</button>
<div id="progressBar"></div>
<div id="fileInfo"></div>
// JavaScript代碼
document.getElementById('uploadButton').onclick = function() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
document.getElementById('progressBar').innerHTML = percent.toFixed(2) + '%';
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var fileInfo = JSON.parse(xhr.responseText);
document.getElementById('fileInfo').innerHTML = '文件類型: ' + fileInfo.type + '，大小: ' + fileInfo.size;
}
};
var formData = new FormData();
formData.append('file', file);
xhr.send(formData);
};

在上述代碼中，我們首先獲取到文件輸入框和上傳按鈕的DOM元素，并添加點擊事件處理函數。在事件處理函數中，我們通過文件輸入框獲取到用戶選擇的文件，并創建一個XMLHttpRequest對象。然后，我們設置請求的方法、URL和是否異步。接著，我們監聽XHR對象的上傳進度事件，并根據進度計算出上傳進度百分比，并將其顯示在進度條中。

在XHR對象的onreadystatechange事件中，我們監聽XHR對象的狀態變化。當狀態為4時，表示請求已完成，并且響應已就緒。我們先檢查響應的狀態碼是否為200，表示請求成功。然后，我們解析服務器返回的文件信息，并將其顯示在頁面中。

通過以上方法，我們可以實現Ajax上傳文件，并能夠實時獲取到上傳文件的信息。這樣一來，用戶就不需要等待頁面刷新，而能夠在上傳過程中獲取到上傳文件的相關信息，大大提升了用戶體驗。