在網頁開發中，經常會遇到需要上傳文件的表單提交操作。傳統的表單提交會導致頁面刷新，用戶體驗較差。然而，通過使用Ajax技術，我們可以實現在不刷新頁面的情況下控制表單提交文件。下面將通過舉例說明Ajax如何實現這一功能。

假設我們要開發一個圖片上傳的功能。在網頁中，用戶可以選擇一張圖片并點擊提交按鈕上傳到服務器。通過使用Ajax，我們可以在不刷新頁面的情況下將所選擇的圖片文件發送到服務器，并接收服務器返回的上傳結果進行反饋。以下為實現代碼：

$('button').click(function() {
var file = $('#fileInput').prop('files')[0]; // 獲取用戶選擇的圖片文件
var formData = new FormData(); // 創建FormData對象
formData.append('file', file); // 將文件添加到FormData對象中
$.ajax({
url: 'upload.php', // 服務器接收上傳文件的頁面
type: 'POST',
data: formData,
processData: false, // 不處理數據
contentType: false, // 不設置Content-Type請求頭
success: function(response) {
// 上傳成功后的處理邏輯
console.log(response);
},
error: function(xhr, status, error) {
// 上傳失敗后的處理邏輯
console.log(error);
}
});
});

以上代碼首先通過選擇器選中了一個按鈕元素，并添加了點擊事件監聽器。當用戶點擊按鈕時，首先從文件輸入框中獲取用戶選擇的文件。然后，創建了一個FormData對象，并將文件添加進去。接著，通過Ajax發送POST請求到服務器上的upload.php頁面，FormData對象中的數據會以表單數據的形式被發送到服務器上。注意，procecessData和contentType被設置為false，以防止jQuery對數據進行預處理和添加Content-Type請求頭。當服務器返回上傳結果時，可以在success和error回調函數中處理。成功上傳后，服務器返回的結果會打印到瀏覽器的控制臺中。

通過上述代碼，我們實現了在不刷新頁面的情況下控制表單提交文件的功能。用戶可以在網頁上選擇圖片，并點擊上傳按鈕，上傳結果會通過Ajax發送到服務器進行處理，并獲得上傳結果的反饋。這種基于Ajax的文件上傳方式使得用戶體驗更加友好，提升了網站的交互性。