AJAX（Asynchronous JavaScript and XML）是一種用于 Web 開(kāi)發(fā)的技術(shù)，它允許我們向服務(wù)器發(fā)送異步請(qǐng)求并在不重新加載整個(gè)頁(yè)面的情況下更新頁(yè)面的一部分。通過(guò) AJAX，我們可以以更快、更流暢的方式與服務(wù)器進(jìn)行交互。

在 Web 開(kāi)發(fā)中，有時(shí)候我們需要向服務(wù)器提交文件，比如圖片、視頻或文檔等。使用 AJAX 和一些適當(dāng)?shù)募夹g(shù)，可以在不刷新整個(gè)頁(yè)面的情況下實(shí)現(xiàn)文件上傳功能。

在下面的示例中，我們將展示如何使用 AJAX 提交文件至服務(wù)器，并實(shí)時(shí)顯示文件上傳的進(jìn)度。

function uploadFile(file) {
var xhr = new XMLHttpRequest();
// 創(chuàng)建 FormData 對(duì)象并將文件添加進(jìn)去
var formData = new FormData();
formData.append('file', file);
// 監(jiān)聽(tīng) xhr 的上傳進(jìn)度
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded / event.total) * 100);
console.log('上傳進(jìn)度：' + percentage + '%');
}
});
// 定義請(qǐng)求的方法、URL 和是否異步
xhr.open('POST', '/upload', true);
// 發(fā)送請(qǐng)求
xhr.send(formData);
}

首先，我們創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象（xhr）。然后，我們創(chuàng)建一個(gè) FormData 對(duì)象（formData），并將要上傳的文件添加進(jìn)去。formData 的 append 方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是字段的名稱(chēng)，第二個(gè)參數(shù)是要上傳的文件對(duì)象。在這個(gè)示例中，我們假設(shè)文件的字段名稱(chēng)是 'file'。

接下來(lái)，我們監(jiān)聽(tīng) xhr 的 upload 事件，以便實(shí)時(shí)獲取上傳的進(jìn)度。事件對(duì)象中的 loaded 屬性表示已經(jīng)上傳的字節(jié)數(shù)，total 屬性表示文件的總字節(jié)數(shù)。通過(guò)這兩個(gè)屬性，我們可以計(jì)算出上傳的百分比。

<input type="file" id="fileInput" onchange="handleFileUpload()">
<script>
function handleFileUpload() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
uploadFile(file);
}
</script>

在 HTML 中，我們通過(guò) input 元素的 type 屬性設(shè)置為 'file' 來(lái)創(chuàng)建一個(gè)文件選擇框。我們還給 input 元素設(shè)置了一個(gè) id，以便可以通過(guò) JavaScript 獲取到該元素。

然后，我們編寫(xiě)一個(gè) JavaScript 函數(shù) handleFileUpload。在這個(gè)函數(shù)中，我們首先通過(guò) document.getElementById 獲取到 fileInput 元素，然后通過(guò) files 屬性獲取到選擇的文件對(duì)象。在這個(gè)示例中，我們假設(shè)只選擇了一個(gè)文件。

最后，我們將文件對(duì)象傳遞給 uploadFile 函數(shù)進(jìn)行上傳。

使用上面的代碼和技術(shù)，你可以輕松地實(shí)現(xiàn) AJAX 文件上傳的功能。通過(guò)監(jiān)聽(tīng)上傳進(jìn)度，你還可以實(shí)時(shí)地展示上傳的進(jìn)度，給用戶(hù)更好的體驗(yàn)。