AJAX是一種在網頁上實現異步通信的技術，可以實現不刷新整個頁面的情況下與服務器進行數據交互。文件上傳是Web開發中常見的需求之一，常用的方法是通過頁面表單來上傳文件。然而，使用傳統的表單提交方式會導致頁面刷新，用戶體驗較差。本文將介紹如何使用AJAX進行文件上傳，實現更好的用戶體驗。
使用AJAX文件上傳的一種常見方法是通過FormData對象來封裝文件和其他表單數據。例如，在一個圖片上傳的場景中，我們可以創建一個表單，包含一個文件選擇框和一個提交按鈕：
<form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="image" id="imageInput" /> <button type="button" onclick="uploadFile()">上傳</button> </form>
在JavaScript代碼中，創建一個FormData對象，并將文件和其他表單數據添加進去。然后，使用AJAX發送這個FormData對象到服務器：
function uploadFile() {
var form = document.getElementById("uploadForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上傳成功
}
};
xhr.send(formData);
}上述代碼中，通過調用FormData對象的append()方法，我們可以將文件和表單數據添加到formData對象中。在發送AJAX請求時，需要設置請求的方法、URL和異步標志，并添加一個回調函數來處理服務器的響應。當服務器返回200狀態碼表示上傳成功時，我們可以在回調函數中進行一些操作。
下面是一個完整的文件上傳的例子。假設我們要上傳一個圖片，然后在成功上傳后，在頁面上顯示這張圖片：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="imageInput" />
<button type="button" onclick="uploadFile()">上傳</button>
</form>
<div id="imagePreview"></div>
<script>
function uploadFile() {
var form = document.getElementById("uploadForm");
var formData = new FormData(form);
$.ajax({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
var imageURL = response.url;
var imagePreview = document.getElementById("imagePreview");
var img = document.createElement("img");
img.src = imageURL;
imagePreview.appendChild(img);
}
});
}
</script>
</body>
</html>上述代碼中，我們使用了jQuery庫來簡化AJAX請求的操作。在成功上傳后，服務器返回一個圖片的URL，我們將該URL賦值給一個新創建的<img>元素的src屬性，并將這個元素添加到頁面上的id為imagePreview的div中。這樣，用戶就可以立即預覽上傳的圖片。
總之，使用AJAX進行文件上傳可以大大提高用戶的體驗，避免整個頁面的刷新。通過FormData對象的使用，我們可以方便地封裝文件和其他表單數據，并使用AJAX技術將它們發送到服務器。希望本文能夠幫助讀者理解和使用AJAX文件上傳。