Ajax是一種基于JavaScript和XML的前端技術，可以實現異步數據交互，使頁面在不刷新的情況下更新部分內容。MVC4是一種模型-視圖-控制器的開發模式，用于構建Web應用程序。圖片上傳是Web開發中常見的功能之一，通常用于用戶頭像、產品圖片等場景。本文將介紹如何使用Ajax和MVC4實現圖片上傳功能，并提供代碼示例。

在實現圖片上傳功能之前，我們首先需要一個包含上傳按鈕和預覽區域的HTML頁面。代碼如下：

<form id="uploadForm" enctype="multipart/form-data" method="post">
<input type="file" id="fileInput" name="fileInput" accept="image/*" />
<input type="submit" value="上傳" />
</form>
<div id="previewArea">
<img id="previewImage" src="" alt="預覽圖" />
</div>

上述代碼中，我們使用HTML的<input type="file">標簽實現文件選擇功能，并使用<img>標簽在預覽區域顯示選擇的圖片。Form表單的enctype屬性設置為"multipart/form-data"用于支持文件上傳。

接下來，我們使用AJAX通過MVC4的控制器處理圖片上傳請求。在控制器中，我們可以使用ASP.NET的HttpPostedFileBase類接收上傳的文件，并將其保存到指定的位置。代碼如下：

[HttpPost]
public ActionResult Upload(HttpPostedFileBase fileInput)
{
if (fileInput != null && fileInput.ContentLength >0)
{
var fileName = Path.GetFileName(fileInput.FileName);
var path = Path.Combine(Server.MapPath("~/Uploads"), fileName);
fileInput.SaveAs(path);
return Content("上傳成功！");
}
else
{
return Content("上傳失??！");
}
}

上述代碼中，我們定義了一個HttpPost的Action方法，名為Upload。該方法接收一個名為fileInput的參數，類型為HttpPostedFileBase。在方法中，我們首先判斷接收到的文件是否為空，并且文件大小大于0。如果條件滿足，我們將文件保存到指定位置，并返回一個上傳成功的提示；否則，返回一個上傳失敗的提示。

接下來，我們使用JavaScript編寫頁面的客戶端代碼，通過Ajax發送圖片上傳請求，并實現預覽功能。代碼如下：

$(document).ready(function() {
$('#uploadForm').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: '/Controller/Upload',
type: 'POST',
data: formData,
dataType: 'html',
processData: false,
contentType: false,
success: function(data) {
$('#previewImage').attr('src', '');
$('#previewArea').text(data);
},
error: function() {
$('#previewArea').text('上傳失敗！');
}
});
});
$('#fileInput').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
$('#previewImage').attr('src', e.target.result);
}
reader.readAsDataURL(file);
});
});

上述代碼中，我們首先使用jQuery的submit()方法阻止表單的默認提交行為，并獲取表單的FormData對象。然后，使用$.ajax()方法發送上傳請求，指定URL為我們在控制器中定義的Upload方法。data屬性設置為FormData對象，processData和contentType屬性均設置為false，以避免對表單數據進行預處理。成功回調函數將在上傳成功時調用，將預覽區域的圖片地址重置為空，并將上傳結果顯示在預覽區域。失敗回調函數將在上傳失敗時調用。

最后，我們需要在MVC4的路由配置中添加一個專門用于處理上傳請求的路由。代碼如下：

routes.MapRoute(
name: "Upload",
url: "Controller/Upload",
defaults: new { controller = "Controller", action = "Upload" }
);

上述代碼中，我們添加了一個名為"Upload"的路由，并將URL指向我們在控制器中定義的Upload方法。

綜上所述，通過結合Ajax和MVC4，我們可以實現圖片上傳的功能。用戶選擇圖片后，可以通過Ajax將圖片上傳到服務器，并在預覽區域顯示上傳的圖片。同時，我們還提供了完整的代碼示例，幫助讀者更好地理解和應用該技術。