本文介紹如何使用Ajax將文件上傳到服務器的源碼實現。在很多Web應用程序中，文件上傳功能是一個非常常見和重要的功能。傳統的文件上傳方式會導致頁面刷新，并且無法提供上傳進度的反饋。而使用Ajax上傳文件可以實現無刷新上傳，并且可以實時顯示上傳進度，提升用戶體驗。

下面是一個示例的源碼實現：

// HTML
<input type="file" id="fileInput" name="file" />
<button id="uploadButton">上傳</button>
<progress id="progressBar" value="0" max="100"></progress>
<p id="status"></p>
// JavaScript
<script>
var fileInput = document.getElementById("fileInput");
var uploadButton = document.getElementById("uploadButton");
var progressBar = document.getElementById("progressBar");
var status = document.getElementById("status");
uploadButton.addEventListener("click", function () {
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (event) {
var percentComplete = event.loaded / event.total;
progressBar.value = percentComplete * 100;
status.innerHTML = Math.round(percentComplete * 100) + "% 上傳中...";
});
xhr.addEventListener("load", function (event) {
status.innerHTML = "上傳完成！";
});
xhr.open("POST", "/upload", true);
xhr.send(formData);
});
</script>

在這個例子中，我們首先定義了一個文件輸入元素和一個上傳按鈕，以及一個進度條和一個狀態顯示元素。當用戶點擊上傳按鈕時，我們監聽文件輸入元素的change事件，獲取用戶選擇的文件，并創建FormData對象，將選擇的文件添加到FormData中。

接下來，我們創建XMLHttpRequest對象，并監聽upload事件，通過計算已上傳的字節數與總字節數的比例，實時更新進度條的值，并在狀態顯示元素中顯示上傳進度。

當文件上傳完成時，我們監聽load事件，并在狀態顯示元素中顯示“上傳完成”字樣。

最后，我們使用open方法指定請求的類型、URL和異步標志，并使用send方法將FormData數據發送到服務器端。

通過以上的代碼實現，我們實現了通過Ajax無刷新上傳文件，并實時顯示上傳進度的功能，從而提升用戶體驗。