AJAX（Asynchronous JavaScript and XML）是一個用于在不重新加載整個網(wǎng)頁的情況下向服務(wù)器發(fā)送和接收數(shù)據(jù)的技術(shù)。它可以讓我們在網(wǎng)頁中使用JavaScript來運行服務(wù)器上的代碼，并且能夠?qū)崿F(xiàn)實時交互。在現(xiàn)代網(wǎng)頁應(yīng)用程序中，文件上傳是一個常見的需求，本文將介紹使用AJAX進行文件上傳的前端代碼。

在傳統(tǒng)的網(wǎng)頁開發(fā)中，文件上傳通常是通過提交表單來完成的。用戶選擇文件后，點擊提交按鈕，整個表單會被發(fā)送到服務(wù)器進行處理。這種方式會導(dǎo)致頁面重新加載，用戶體驗不佳。

使用AJAX進行文件上傳的好處是能夠在不刷新頁面的情況下上傳文件，并且能夠?qū)崟r顯示上傳的進度。下面是一個示例代碼：

// HTML代碼
<input type="file" id="file">
<button id="uploadButton">上傳</button>
<div id="progressBar"></div>
// JavaScript代碼
document.getElementById("uploadButton").addEventListener("click", function() {
var fileInput = document.getElementById("file");
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(event) {
var percent = (event.loaded / event.total) * 100;
var progressBar = document.getElementById("progressBar");
progressBar.style.width = percent + "%";
});
xhr.open("POST", "/upload", true);
var formData = new FormData();
formData.append("file", file);
xhr.send(formData);
});

在上面的代碼中，我們首先使用HTML定義了一個文件上傳的表單，包含一個文件選擇框和一個上傳按鈕。然后使用JavaScript監(jiān)聽上傳按鈕的點擊事件。在點擊事件處理函數(shù)中，我們先獲取到文件選擇框中的文件，然后創(chuàng)建一個XMLHttpRequest對象。

接著，我們使用xhr.upload.addEventListener()來監(jiān)聽上傳過程中的progress事件。這個事件會在每次上傳數(shù)據(jù)時觸發(fā)，我們可以通過event參數(shù)來獲取到已經(jīng)上傳和總共需要上傳的字節(jié)數(shù)。然后我們根據(jù)這兩個值計算出上傳的進度百分比，并將進度條的長度相應(yīng)地設(shè)置為該百分比。

接下來，我們使用xhr.open()方法來指定上傳文件的URL和請求方式。其中第一個參數(shù)是請求的方法，這里是"POST"，第二個參數(shù)是請求的URL，這里是"/upload"。

然后，我們創(chuàng)建一個FormData對象，并使用formData.append()方法將文件添加到表單中。FormData對象可以將表單數(shù)據(jù)以鍵值對的形式進行傳輸。

最后，我們使用xhr.send()方法將FormData對象發(fā)送給服務(wù)器。服務(wù)器端的代碼解析這個表單數(shù)據(jù)，接收到文件后進行相應(yīng)的處理。

總結(jié)來說，使用AJAX進行文件上傳能夠提升用戶體驗，避免頁面重新加載，實時顯示上傳進度。通過監(jiān)聽progress事件，我們可以動態(tài)更新進度條的長度，讓用戶清楚地知道上傳的進度。同時，使用FormData對象可以方便地處理表單數(shù)據(jù)。以上就是使用AJAX進行文件上傳的前端代碼。