AJAX和MVC模式是現代Web開發中常用的兩個重要概念。AJAX（Asynchronous JavaScript and XML）是一種異步通信技術，通過在Web頁面中使用JavaScript來向服務器發送請求并接收響應，使得頁面能夠在不重新加載的情況下更新內容。而MVC（Model-View-Controller）是一種軟件設計模式，將應用程序分為三個獨立的部分：數據模型（Model），用戶界面（View）和控制邏輯（Controller）。本文將介紹如何結合AJAX和MVC模式實現圖片上傳功能，并且通過具體的代碼示例進行說明。

假設我們正在開發一個圖片分享網站，用戶可以上傳自己喜歡的照片并與其他人分享。在實現圖片上傳功能時，我們希望用戶能夠在上傳過程中實時看到上傳進度，并且不影響頁面的正常使用。為了實現這一目標，我們可以使用AJAX與MVC模式相結合的方式。

首先，在MVC模式中，我們將圖片的上傳過程劃分為三個階段：選擇要上傳的圖片、上傳圖片到服務器、保存圖片信息到數據庫。通過AJAX技術，我們可以在不刷新整個頁面的情況下，將用戶選擇的圖片文件發送到服務器，并實時顯示上傳進度。

// HTML代碼
<input type="file" id="uploadFile" />
<progress id="uploadProgress" value="0" max="100"></progress>
// JavaScript代碼
var input = document.getElementById('uploadFile');
var progress = document.getElementById('uploadProgress');
input.addEventListener('change', function() {
var file = input.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
var percentage = Math.round(event.loaded / event.total * 100);
progress.value = percentage;
});
xhr.open('POST', '/upload', true);
xhr.send(formData);
});

上述代碼中，我們通過監聽<input>元素的change事件，獲取用戶選擇的圖片文件，并創建一個FormData對象用于存儲文件數據。然后，我們使用XMLHttpRequest對象實現與服務器的通信，并在上傳過程中監聽progress事件，更新<progress>元素的value屬性，從而實時顯示上傳進度。

當圖片上傳到服務器后，我們使用服務器端的MVC框架將圖片信息保存到數據庫中。這里我們使用Node.js和Express框架作為服務器端的開發工具。下面的代碼展示了如何使用Express框架處理圖片上傳的請求，并將圖片信息保存到數據庫中。

// JavaScript代碼（服務器端）
var express = require('express');
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
var app = express();
app.post('/upload', upload.single('file'), function(req, res, next) {
// 處理文件上傳邏輯
var file = req.file;
var fileInfo = {
filename: file.originalname,
mimetype: file.mimetype,
size: file.size,
path: file.path
};
// 將圖片信息保存到數據庫中
// ...
res.send('上傳成功！');
});
app.listen(3000, function() {
console.log('服務器已啟動！');
});

上述代碼中，我們使用multer中間件處理圖片上傳的請求。通過upload.single()方法，我們可以定義一個文件上傳的處理函數，并且指定上傳的文件字段名為'file'。在文件上傳的處理函數中，我們可以獲取上傳的文件對象，并將其中的信息提取出來，然后將圖片信息保存到數據庫中。

綜上所述，使用AJAX與MVC模式相結合，我們可以實現圖片上傳功能，并且提供實時的上傳進度顯示。通過分解上傳過程為多個階段，并使用AJAX實現異步通信，可以確保用戶上傳圖片時不會對頁面的正常使用造成影響。同時，在MVC模式下，我們可以清晰地劃分功能模塊，實現代碼的可維護性和擴展性。