AJAX（Asynchronous JavaScript And XML）是一種在網頁中實現異步通信的技術，它可以實現頁面的無刷新更新。在網頁開發中，常常需要通過表單上傳文件，傳統的表單提交會重新加載整個頁面，不僅用戶體驗差，還浪費了帶寬和服務器資源。本文將介紹如何使用AJAX實現表單上傳，以提升用戶體驗和減少資源消耗。

通常的表單上傳方式是通過form標簽的enctype屬性指定為"multipart/form-data"來實現的。在AJAX中，可以使用FormData對象來模擬表單的提交，并通過XMLHttpRequest對象實現異步請求。下面的例子展示了如何使用AJAX實現文件上傳。

<form id="uploadForm" enctype="multipart/form-data"><input type="file" name="file" id="fileInput"><input type="button" value="上傳" onclick="uploadFile()"></form><script>function uploadFile() {
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onload = function() {
if (xhr.status === 200) {
alert("文件上傳成功！");
} else {
alert("文件上傳失敗！");
}
};
xhr.send(formData);
}
</script>

在上面的例子中，我們首先獲取到了input標簽類型為file的元素對象，通過files屬性可以獲取到用戶選擇的文件。然后創建了一個FormData對象，用append方法將文件對象添加到FormData中。接下來，我們創建了一個XMLHttpRequest對象，并指定了請求的url和請求方式。通過設置onload事件處理函數，在請求完成時根據響應狀態碼判斷文件上傳是否成功。最后發送請求，將FormData對象作為參數傳遞。

使用AJAX上傳文件可以實現頁面無刷新更新，為用戶提供更好的體驗。同時，由于只傳輸了文件數據，減少了不必要的帶寬和服務器資源消耗。另外，通過設置XMLHttpRequest的onprogress事件，我們還可以實現文件上傳進度的實時顯示。例如：

var progressBar = document.getElementById("progressBar");
var percentText = document.getElementById("percentText");
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
progressBar.style.width = percentComplete + "%";
percentText.innerText = percentComplete.toFixed(2) + "%";
}
};

上面的代碼中，我們獲取到了進度條和百分比文本的元素對象，然后通過計算上傳進度的百分比來更新進度條的寬度和文本內容。這樣用戶就可以清楚地看到文件上傳的進度了。

總之，使用AJAX實現表單文件上傳可以提升網頁的用戶體驗和減少資源消耗。通過FormData對象模擬表單提交，并通過XMLHttpRequest對象實現異步請求，可以避免頁面的重新加載。此外，還可以通過設置onprogress事件來實現文件上傳進度的實時顯示。開發者可以根據具體的需求來靈活應用這些技巧，提供更好的用戶體驗。