隨著網頁交互的需求越來越復雜，傳統的表單提交已經無法滿足現代網頁應用的需求。傳統的表單提交只能提交簡單的字符串數據，而無法直接提交文件數據。然而，通過使用Ajax技術，我們可以輕松地實現文件數據的提交和處理。

在Ajax中，文件數據是通過FormData對象來處理的。FormData對象提供了一種簡單的方式來收集表單數據，包括文件和一般的表單字段。

下面是一個例子，介紹如何使用Ajax來提交文件數據：

// HTML
<form id="fileUploadForm"><input type="file" name="myFile"><button type="button" onclick="uploadFile()">提交</button></form>// JavaScript
function uploadFile() {
var form = document.getElementById("fileUploadForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("文件上傳成功！");
}
};
xhr.send(formData);
}

在這個例子中，我們創建了一個包含一個文件輸入框和一個提交按鈕的表單。當用戶選擇一個文件并點擊提交按鈕時，JavaScript函數uploadFile()被調用。

uploadFile()函數首先獲取了表單元素，然后使用FormData構造函數創建了一個FormData對象。FormData對象會自動收集表單中的所有字段值，包括文件數據。

接下來，我們創建一個XMLHttpRequest對象，并打開一個POST請求，指定了目標URL和異步標識符。然后，我們設置了一個回調函數，當請求的狀態變為4（即完成）且狀態碼為200時，觸發該回調函數。

最后，我們使用send()方法發送FormData對象，從而將文件數據提交給服務器。服務器端的代碼可以根據需要進行文件的保存、處理和返回相應結果等操作。

除了上傳文件，Ajax還可以用于提供實時文件上傳進度的展示。下面是一個例子，演示了如何使用Ajax和XHR對象來實時顯示文件上傳的進度。

// HTML
<form id="fileUploadForm"><input type="file" name="myFile"><button type="button" onclick="uploadFile()">提交</button></form><progress id="progressBar" value="0" max="100">// JavaScript
function uploadFile() {
var form = document.getElementById("fileUploadForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
var progressBar = document.getElementById("progressBar");
progressBar.value = percent;
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("文件上傳成功！");
}
};
xhr.send(formData);
}

在這個例子中，我們添加了一個progress元素，用來展示文件上傳的進度。當上傳進度發生變化時，upload.onprogress事件被觸發，我們可以在回調函數中通過計算已上傳和總大小的比例來更新進度條的值。

通過使用Ajax技術，我們可以很方便地提交文件數據，并且實時展示文件上傳的進度。這為我們構建更加現代化、交互性更強的網頁應用提供了便利。