AJAX是一種前端技術，可以實現無需刷新頁面的數據交互和更新。在實際應用中，我們經常遇到需要上傳圖片并保存到數據庫的需求。本文將介紹如何使用AJAX接收圖片并保存到數據庫，并通過舉例說明該過程。

假設我們有一個簡單的圖片上傳功能，用戶可以選擇一張圖片并點擊上傳按鈕。我們首先需要在HTML中添加一個file input元素和一個button元素：

<input type="file" id="uploadInput">
<button id="uploadBtn" onclick="uploadImage()">上傳圖片</button>

接下來，我們需要編寫JavaScript函數uploadImage()來處理上傳圖片的功能。這個函數將會使用AJAX來接收圖片，并將其保存到數據庫中。

function uploadImage() {
var selectedFile = document.getElementById('uploadInput').files[0];
var formData = new FormData();
formData.append('image', selectedFile);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload-image', true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log('上傳成功');
}
};
xhr.send(formData);
}

在上面的代碼中，我們首先獲取用戶選擇的圖片文件，并創建一個FormData對象來存儲該文件。然后，我們創建一個XMLHttpRequest對象，并設置請求方法為POST，請求地址為/upload-image。

在xhr.onreadystatechange回調函數中，我們判斷請求的狀態是否為完成狀態（readyState === 4），以及請求的狀態碼是否為200。如果滿足這兩個條件，表示圖片上傳成功。

接下來，我們需要在后端編寫一個接口來接收并保存圖片到數據庫。以Node.js為例，我們可以使用express框架來完成這個接口：

var express = require('express');
var multer  = require('multer');
var upload = multer({ dest: 'uploads/' });
var app = express();
app.post('/upload-image', upload.single('image'), function (req, res, next) {
// 將圖片信息保存到數據庫
var image = req.file;
// 其他操作...
res.sendStatus(200);
});
app.listen(3000, function() {
console.log('服務器已啟動');
});

上述代碼中，我們首先引入了express和multer模塊，用于處理文件上傳的邏輯。upload.single('image')函數指定了上傳字段名稱為image，并將文件保存到uploads/目錄中。

在接口處理函數中，我們可以在req.file中獲取到上傳的圖片文件信息，進而將其保存到數據庫中。這里的具體邏輯將根據使用的數據庫類型而有所不同。

總結來說，使用AJAX接收圖片并將其保存到數據庫需要以下幾個步驟：
1. 在前端HTML中添加上傳文件的input元素和一個上傳按鈕。
2. 在JavaScript中，編寫一個函數來處理上傳圖片的功能，使用AJAX發送HTTP POST請求，并將圖片數據保存到FormData對象中。
3. 在后端編寫一個接口來接收并保存圖片到數據庫，可以使用multer等模塊來處理文件上傳邏輯。

通過以上步驟，我們可以實現使用AJAX接收圖片并保存到數據庫的功能。這種方式能夠實現無需刷新頁面的圖片上傳操作，提高了用戶體驗。