Ajax（Asynchronous JavaScript and XML） 是一種用于創建交互式網頁應用的技術，可以實現無需刷新整個頁面的數據傳輸和交互。在網頁開發中，我們經常需要實現上傳圖片到數據庫的功能，并且希望能夠在上傳的同時顯示實時的上傳進度。本文將會介紹如何使用Ajax來實現圖片的上傳，并將其保存到數據庫中。

首先，我們需要在前端頁面中創建一個包含文件上傳的表單。HTML 中的 input 標簽具有 type 屬性，可以設置為 "file"，用于接收從文件選擇對話框中選擇的文件。我們還需要使用一個按鈕來觸發上傳操作。下面是一個簡單的示例：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="image" />
<button type="button" id="uploadButton">上傳</button>
</form>

在用戶選擇完文件后，我們需要通過 JavaScript 將文件發送到服務器。這里我們使用 jQuery 庫中的 Ajax 方法來實現。通過監聽文件選擇按鈕的點擊事件，獲取用戶選擇上傳的文件，再利用 Ajax 方法將數據發送到服務器：

$(document).ready(function() {
$('#uploadButton').click(function() {
var file = $('#fileInput')[0].files[0];
var formData = new FormData();
formData.append('image', file);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
alert('圖片上傳成功！');
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log(percent + '% uploaded');
}
});
return xhr;
}
});
});
});

上述代碼中，我們首先獲取用戶選擇的文件對象，并使用 FormData 對象來包裝數據。然后，通過 Ajax 方法發送 FormData 對象。在發送過程中，我們使用 contentType 設置為 false，以便讓瀏覽器自行設置請求頭部的 Content-Type；將 processData 設置為 false，以便讓 jQuery 不將 FormData 轉為字符串提交。在發送過程中，我們還可以利用 xhr 事件來監聽實時的上傳進度，通過 e.loaded 和 e.total 屬性來計算百分比。

服務器端的具體代碼將根據后端語言和數據庫的不同而有所不同。以 PHP 為例，服務器端接收到上傳的文件后，可以使用 move_uploaded_file 函數將文件從 PHP 的臨時文件夾移動到服務器上的指定位置，并將文件路徑保存到數據庫中：

if ($_FILES['image']['error'] == 0) {
$tempPath = $_FILES['image']['tmp_name'];
$fileName = $_FILES['image']['name'];
$uploadPath = 'uploads/' . $fileName;
move_uploaded_file($tempPath, $uploadPath);
// 保存文件路徑到數據庫
$db->query("INSERT INTO images (path) VALUES ('$uploadPath')");
}

以上代碼中，我們首先判斷文件上傳是否有錯誤，如果沒有錯誤，則獲取文件的臨時路徑、文件名和上傳路徑。然后，使用 move_uploaded_file 函數將文件從臨時路徑移動到指定上傳路徑，并將路徑保存到數據庫中。

通過以上步驟，我們就成功地實現了使用 Ajax 將圖片上傳到數據庫的功能。用戶選擇完文件后，將會實時地顯示上傳進度，同時服務器端會將文件保存到指定路徑，并將路徑保存到數據庫中。這種方式避免了頁面的刷新，讓用戶體驗更加流暢。