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

在實(shí)現(xiàn)圖片上傳功能之前，我們首先需要一個(gè)包含上傳按鈕和預(yù)覽區(qū)域的HTML頁(yè)面。代碼如下：

<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="預(yù)覽圖" />
</div>

上述代碼中，我們使用HTML的<input type="file">標(biāo)簽實(shí)現(xiàn)文件選擇功能，并使用<img>標(biāo)簽在預(yù)覽區(qū)域顯示選擇的圖片。Form表單的enctype屬性設(shè)置為"multipart/form-data"用于支持文件上傳。

接下來(lái)，我們使用AJAX通過(guò)MVC4的控制器處理圖片上傳請(qǐng)求。在控制器中，我們可以使用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("上傳失敗！");
}
}

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

接下來(lái)，我們使用JavaScript編寫(xiě)頁(yè)面的客戶端代碼，通過(guò)Ajax發(fā)送圖片上傳請(qǐng)求，并實(shí)現(xiàn)預(yù)覽功能。代碼如下：

$(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()方法阻止表單的默認(rèn)提交行為，并獲取表單的FormData對(duì)象。然后，使用$.ajax()方法發(fā)送上傳請(qǐng)求，指定URL為我們?cè)诳刂破髦卸x的Upload方法。data屬性設(shè)置為FormData對(duì)象，processData和contentType屬性均設(shè)置為false，以避免對(duì)表單數(shù)據(jù)進(jìn)行預(yù)處理。成功回調(diào)函數(shù)將在上傳成功時(shí)調(diào)用，將預(yù)覽區(qū)域的圖片地址重置為空，并將上傳結(jié)果顯示在預(yù)覽區(qū)域。失敗回調(diào)函數(shù)將在上傳失敗時(shí)調(diào)用。

最后，我們需要在MVC4的路由配置中添加一個(gè)專門(mén)用于處理上傳請(qǐng)求的路由。代碼如下：

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

上述代碼中，我們添加了一個(gè)名為"Upload"的路由，并將URL指向我們?cè)诳刂破髦卸x的Upload方法。

綜上所述，通過(guò)結(jié)合Ajax和MVC4，我們可以實(shí)現(xiàn)圖片上傳的功能。用戶選擇圖片后，可以通過(guò)Ajax將圖片上傳到服務(wù)器，并在預(yù)覽區(qū)域顯示上傳的圖片。同時(shí)，我們還提供了完整的代碼示例，幫助讀者更好地理解和應(yīng)用該技術(shù)。