使用 Ajax 和 ASP.NET 實現圖片上傳，可以提高用戶體驗，使上傳過程更加流暢和無需刷新頁面。本文將介紹如何使用 Ajax 技術與 ASP.NET 相結合，實現圖片上傳功能。 在傳統方式中，用戶選擇圖片后，需要等待頁面刷新，在等待期間無法進行其他操作，這種上傳方式體驗較差。而使用 Ajax 技術，我們可以通過后臺進行異步處理，無需刷新頁面即可完成上傳，極大地提高了用戶的體驗。 在本文中，我們將以一個簡單的網站為例，實現圖片上傳功能。假設我們的網站擁有一個用戶頭像功能，用戶可以選擇自己喜歡的頭像上傳到服務器。用戶可以選擇本地的一張圖片，點擊上傳按鈕后，圖片將被發送到服務器并顯示在網頁上。 首先，我們需要在 ASP.NET 的頁面中添加一個文件上傳的控件。頁面代碼如下所示：

<form id="form1" runat="server">
<input type="file" id="uploadFile" />
<input type="button" id="btnUpload" value="上傳" onclick="UploadImage();"/>
<img id="uploadedImage" alt="" style="display:none;" />
</form>

在 JavaScript 中，我們通過 Ajax 技術實現文件上傳。我們使用 jQuery 的 Ajax 方法來發送文件到服務器。上傳過程中，我們顯示一個 Loading 圖標，上傳完成后，將圖片返回并顯示在網頁上。

function UploadImage() {
var file = $("#uploadFile").get(0).files;
var formData = new FormData();
formData.append("file", file[0]);
$.ajax({
url: "UploadImageHandler.ashx",
type: "POST",
data: formData,
dataType: "json",
async: true,
cache: false,
processData: false,
contentType: false,
beforeSend: function () {
// 顯示 Loading 圖標
$("#uploadedImage").attr("src", "loading.gif").show();
},
success: function (response) {
// 隱藏 Loading 圖標并顯示上傳的圖片
$("#uploadedImage").attr("src", response.imageUrl).show();
},
error: function () {
alert("上傳失敗！");
}
});
}

在服務器端，我們創建一個 Ashx 文件來處理圖片上傳。在該文件中，我們可以使用 .NET 的 System.Web 命名空間中的方法來保存文件。

public void ProcessRequest(HttpContext context)
{
if (context.Request.Files.Count >0)
{
HttpPostedFile file = context.Request.Files[0];
string fileName = Path.GetFileName(file.FileName);
string fileSavePath = HttpContext.Current.Server.MapPath("~/Images/") + fileName;
file.SaveAs(fileSavePath);
context.Response.ContentType = "application/json";
context.Response.Write("{\"imageUrl\": \"" + virtualPath + "\"}");
}
}

上述代碼首先檢查是否有文件被上傳。如果有文件被上傳，我們使用 Server.MapPath 方法來獲取文件的保存路徑，并通過調用 SaveAs 方法將文件保存在服務器上。然后，我們返回一個 JSON 格式的字符串，其中包含了上傳圖片的虛擬路徑。 最后，我們需要在網頁上添加一個顯示上傳圖片的元素。在 Ajax 請求成功后，我們將上傳后的圖片顯示在該元素中。在頁面上添加以下代碼即可實現該功能：

<img id="uploadedImage" alt="" style="display:none;" />

本文中，我們介紹了如何使用 Ajax 和 ASP.NET 實現圖片上傳功能。通過結合 Ajax 技術和 ASP.NET，我們大大提高了用戶的體驗，使用戶能夠流暢地上傳圖片而無需等待頁面刷新。這種方法不僅簡單實用，還能為用戶帶來良好的使用體驗。