今天我們來討論一個(gè)非常常見的需求，即如何使用Ajax上傳文件并顯示上傳中的狀態(tài)。

在Web開發(fā)中，文件上傳是一個(gè)非常常見的功能。例如，我們可以想象一個(gè)在線圖片分享網(wǎng)站，用戶可以通過該網(wǎng)站上傳自己的照片。當(dāng)用戶點(diǎn)擊上傳按鈕后，我們希望能夠?qū)崟r(shí)地顯示文件上傳的進(jìn)度和狀態(tài)，以方便用戶知道上傳的進(jìn)展情況。

在傳統(tǒng)的文件上傳過程中，當(dāng)用戶點(diǎn)擊上傳按鈕后，瀏覽器會(huì)發(fā)送一個(gè)HTTP POST請(qǐng)求，將文件數(shù)據(jù)發(fā)送到服務(wù)器。這個(gè)過程比較耗時(shí)，用戶需要等待上傳完成才能繼續(xù)操作。然而，使用Ajax可以改變這種方式，實(shí)現(xiàn)異步上傳文件。同時(shí)，由于Ajax的異步特性，我們也可以方便地實(shí)時(shí)顯示上傳過程中的狀態(tài)。

// HTML
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data"><input type="file" name="file" id="file" /><input type="button" value="Upload" onclick="uploadFile();" /></form>// JavaScript
function uploadFile() {
var fileInput = document.getElementById('file');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function (e) {
var percentage = (e.loaded / e.total) * 100;
console.log(percentage);
document.getElementById('progress').innerHTML = '上傳進(jìn)度：' + percentage.toFixed(2) + '%';
};
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
document.getElementById('progress').innerHTML = '上傳完成！';
} else {
console.log('上傳失敗');
}
};
xhr.send(formData);
}

在上面的代碼中，我們首先定義了一個(gè)HTML表單，其中包含了一個(gè)文件輸入框和一個(gè)上傳按鈕。當(dāng)用戶點(diǎn)擊上傳按鈕時(shí)，會(huì)觸發(fā)JavaScript中的uploadFile函數(shù)。

在uploadFile函數(shù)中，我們首先通過document.getElementById獲取到文件輸入框的引用，并獲取到用戶選擇的文件對(duì)象。然后，我們創(chuàng)建一個(gè)FormData對(duì)象，并使用append方法將文件對(duì)象添加到FormData中。

var fileInput = document.getElementById('file');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

接下來，我們創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，并使用open方法指定請(qǐng)求的方法、URL和是否使用異步方式。然后，我們可以監(jiān)聽xhr對(duì)象的upload.onprogress事件，該事件會(huì)在文件上傳過程中不斷觸發(fā)，我們可以獲取到當(dāng)前上傳的字節(jié)數(shù)和總字節(jié)數(shù)，并計(jì)算出上傳進(jìn)度的百分比。通過修改頁(yè)面中的元素，我們可以實(shí)時(shí)地顯示上傳進(jìn)度。

xhr.upload.onprogress = function (e) {
var percentage = (e.loaded / e.total) * 100;
console.log(percentage);
document.getElementById('progress').innerHTML = '上傳進(jìn)度：' + percentage.toFixed(2) + '%';
};

最后，我們通過send方法將FormData對(duì)象發(fā)送到服務(wù)器，并通過xhr對(duì)象的onload事件監(jiān)聽服務(wù)器的響應(yīng)。如果上傳成功，我們可以在頁(yè)面中顯示上傳完成的狀態(tài)；如果上傳失敗，我們可以在控制臺(tái)輸出錯(cuò)誤信息供調(diào)試。

xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
document.getElementById('progress').innerHTML = '上傳完成！';
} else {
console.log('上傳失敗');
}
};

通過以上代碼，我們實(shí)現(xiàn)了使用Ajax上傳文件并顯示上傳中的狀態(tài)的功能。用戶在上傳文件時(shí)，可以實(shí)時(shí)地看到上傳進(jìn)度的百分比，以及上傳完成的狀態(tài)反饋，提升了用戶體驗(yàn)。

綜上所述，Ajax為文件上傳過程提供了更好的用戶體驗(yàn)。借助Ajax的異步特性，我們可以實(shí)時(shí)地顯示上傳進(jìn)度和狀態(tài)，讓用戶了解文件上傳的進(jìn)展。