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

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

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

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

$(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 對象來包裝數(shù)據(jù)。然后，通過 Ajax 方法發(fā)送 FormData 對象。在發(fā)送過程中，我們使用 contentType 設(shè)置為 false，以便讓瀏覽器自行設(shè)置請求頭部的 Content-Type；將 processData 設(shè)置為 false，以便讓 jQuery 不將 FormData 轉(zhuǎn)為字符串提交。在發(fā)送過程中，我們還可以利用 xhr 事件來監(jiān)聽實時的上傳進度，通過 e.loaded 和 e.total 屬性來計算百分比。

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

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

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

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