在現代的網頁開發中，圖片上傳功能已經成為了一個很常見的需求。然而，傳統的表單提交方式會刷新整個頁面，給用戶帶來不好體驗，因此，Ajax技術的出現為解決這個問題提供了一個非常好的解決方案。本文將介紹如何使用Ajax來實現圖片上傳功能并結合使用ASP.NET框架。

為了更好地理解Ajax圖片上傳的工作原理，我們先來看一個簡單的示例。假設我們有一個上傳圖片的表單，用戶可以選擇要上傳的圖片文件，然后點擊上傳按鈕。在傳統的方式中，用戶點擊上傳按鈕后，整個頁面都會被刷新，服務器端會處理圖片上傳的邏輯并返回結果。而使用Ajax技術，我們可以在不刷新整個頁面的情況下將圖片文件異步上傳到服務器，并實時顯示上傳進度和上傳結果。

// HTML部分
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="imageFile" />
<input type="button" value="上傳" onclick="uploadImage()" />
</form>

在上述示例中，我們使用了一個form表單來包含上傳圖片的輸入框和上傳按鈕。當用戶點擊上傳按鈕時，會觸發JavaScript函數uploadImage()來處理圖片上傳邏輯。

// JavaScript部分
function uploadImage() {
var formData = new FormData();
var fileInput = document.getElementById("imageFile");
formData.append("imageFile", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/UploadImageHandler.ashx", true);
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log(percentComplete + "%");
}
};
xhr.onerror = function(event) {
console.log("上傳失敗！");
};
xhr.onload = function(event) {
if (xhr.status === 200) {
console.log("上傳成功！");
} else {
console.log("上傳失敗！");
}
};
xhr.send(formData);
}

在JavaScript函數uploadImage()中，我們首先創建了一個FormData對象，并使用append()方法將選擇的圖片文件添加到表單中。接著，我們創建了一個XMLHttpRequest對象，并使用open()方法指定要將數據上傳到的服務器端處理程序的地址。在接下來的代碼中，我們監聽了upload.onprogress事件，以實時顯示上傳進度。最后，我們在xhr.onload事件中處理服務器端返回的結果，如果xhr.status等于200，則表示上傳成功，否則表示上傳失敗。

在服務器端，我們需要編寫相應的處理程序來接收并保存上傳的圖片文件。以ASP.NET為例，我們可以通過創建一個繼承自IHttpHandler接口的處理程序來實現這個功能。以下是一個簡單的示例：

// C#部分
public class UploadImageHandler : IHttpHandler {
public void ProcessRequest(HttpContext context) {
HttpPostedFile imageFile = context.Request.Files["imageFile"];
string fileName = imageFile.FileName;
string savePath = context.Server.MapPath("~/Images/") + fileName;
imageFile.SaveAs(savePath);
context.Response.StatusCode = 200;
context.Response.Write("上傳成功！");
}
public bool IsReusable {
get { return false; }
}
}

在這個處理程序中，我們首先通過context.Request.Files["imageFile"]獲取上傳的圖片文件，并使用SaveAs()方法將其保存到指定路徑下。最后，我們設置了context.Response對象的StatusCode屬性為200，并輸出了上傳成功的信息。

通過使用Ajax技術，我們可以實現圖片上傳功能而不刷新整個頁面，提升用戶體驗。在本文中，我們介紹了使用Ajax和ASP.NET框架來實現圖片上傳的基本原理，并給出了相應示例代碼。希望這篇文章能幫助讀者更好地理解和應用Ajax圖片上傳技術。