<p>在前端開發中，我們經常需要實現文件上傳的功能。傳統的文件上傳方式會刷新整個頁面，給用戶帶來不友好的體驗。而隨著Ajax技術的發展，我們可以使用Ajax來實現文件上傳功能，使用戶在上傳文件時保持在當前頁面，提高了用戶體驗。其中，使用FormData對象來進行文件上傳是一種常見的方式。本文將介紹如何使用Ajax上傳文件，并給出相應的代碼示例。</p> <p>首先，我們需要準備一個表單，其中包含一個文件選擇字段和一個提交按鈕。用戶可以通過點擊按鈕來選擇要上傳的文件，并將該文件發送給服務器進行處理。下面是一個簡單的HTML表單示例：</p>

<form id="uploadForm" enctype="multipart/form-data" method="post">
<input type="file" id="fileInput" name="file">
<button type="button" onclick="uploadFile()">上傳文件</button>
</form>

<p>在以上代碼中，我們給表單元素設置了id屬性為"uploadForm"，file字段的name屬性為"file"。提交按鈕被點擊時觸發uploadFile()函數。下面我們來實現這個函數。</p>

<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', true);
xhr.onload = function() {
if (xhr.status === 200) {
alert('文件上傳成功！');
} else {
alert('文件上傳失敗。');
}
};
xhr.send(formData);
}
</script>

<p>在uploadFile()函數中，我們首先獲取用戶選擇的文件。通過document.getElementById('fileInput')可以獲取到文件輸入框的DOM對象，然后取其files屬性即可獲取到選擇的文件列表。在本例中，我們只支持上傳單個文件，所以直接取files數組的第一個元素即可。接下來，我們創建一個FormData對象，并使用其append()方法向其中添加要上傳的文件。這里的'file'是文件字段的名稱，應與后端接口中對應的字段名稱一致。同時，我們創建一個XMLHttpRequest對象xhr，設置請求方式為POST，并指定上傳文件的URL地址。xhr.onload事件會在文件上傳完成后觸發，并根據返回的狀態碼進行相應的處理。最后，通過xhr.send()方法將formData對象發送給服務器進行處理。</p> <p>以上就是使用Ajax上傳文件的主要步驟。用戶在選擇完文件后，點擊提交按鈕，uploadFile()函數會被調用，并將文件發送給服務器進行處理。在服務器端，我們根據業務邏輯獲取到該文件，并進行相應的操作。完成后，通過返回不同的狀態碼，告知前端文件上傳的結果。這樣，用戶就可以在上傳文件時保持在當前頁面，無需跳轉至其他頁面，提高了用戶體驗。</p>