ASP.NET MVC是一種廣泛使用的Web應用程序開發框架，而AJAX（Asynchronous JavaScript and XML）則是一種讓Web頁面與服務器異步進行數據交互的技術。在開發中，文件上傳是一個經常遇到的需求，針對大文件上傳或者實時顯示上傳進度等場景，我們可以通過結合ASP.NET MVC與AJAX來實現這些功能。

在ASP.NET MVC中，文件上傳通常是通過表單提交實現的。例如，我們需要實現一個用戶頭像上傳的功能，用戶選擇要上傳的頭像文件，然后點擊“上傳”按鈕，將文件提交到服務器保存起來。但是傳統的表單提交方式會導致頁面刷新，用戶體驗較差。可以通過AJAX技術實現異步文件上傳，無需刷新頁面即可完成文件上傳。

// 異步上傳頭像
function uploadAvatar() {
var file = document.getElementById('avatarFile').files[0];
var formData = new FormData();
formData.append('avatar', file);
$.ajax({
url: '/User/UploadAvatar',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (data) {
if (data.success) {
// 上傳成功后的處理邏輯
// 更新用戶頭像顯示
}
else {
// 上傳失敗后的處理邏輯
}
},
error: function () {
// 上傳出錯后的處理邏輯
}
});
}

上述代碼中，我們通過JavaScript獲取用戶選擇的頭像文件，并創建FormData對象來構建表單數據。然后，通過AJAX的POST請求將表單數據發送到服務器上的UploadAvatar方法。在服務器端，我們可以使用ASP.NET MVC的控制器來接收上傳的文件并進行相應的處理。

[HttpPost]
public ActionResult UploadAvatar(HttpPostedFileBase avatar)
{
if (avatar != null && avatar.ContentLength >0)
{
// 保存上傳的頭像文件
var fileName = Path.GetFileName(avatar.FileName);
var filePath = Path.Combine(Server.MapPath("~/Avatars"), fileName);
avatar.SaveAs(filePath);
return Json(new { success = true });
}
else
{
return Json(new { success = false });
}
}

在服務器端的UploadAvatar方法中，我們先判斷是否有文件上傳，然后保存上傳的文件到指定的路徑中。如果保存成功，返回一個JSON對象表示上傳成功，否則返回一個JSON對象表示上傳失敗。

除了實現異步文件上傳外，還可以通過AJAX技術實現實時顯示文件上傳進度的功能。例如，當用戶上傳一個較大的文件時，我們可以在頁面中顯示文件上傳的進度條，讓用戶了解上傳進展。在ASP.NET MVC中，可以通過使用XHR對象（XMLHttpRequest）來獲取上傳進度。

// 顯示文件上傳進度
function uploadFileWithProgress() {
var file = document.getElementById('uploadFile').files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/File/UploadWithProgress', true);
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
updateProgress(percent);
}
};
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上傳成功后的處理邏輯
var data = JSON.parse(xhr.responseText);
if (data.success) {
alert('文件上傳成功');
}
else {
alert('文件上傳失敗');
}
}
};
xhr.send(formData);
}
// 更新文件上傳進度條
function updateProgress(percent) {
var progress = document.getElementById('uploadProgress');
progress.style.width = percent + '%';
progress.innerText = percent + '%';
}

上述代碼中，我們使用XMLHttpRequest對象發送POST請求，并在發送請求時監聽上傳進度的變化。在進度監聽器中，我們可以根據loaded和total屬性計算上傳進度的百分比，并調用updateProgress函數來更新頁面中的進度條。在請求完成時，我們解析服務器返回的JSON數據，并根據上傳成功與否進行相應的處理。

通過結合ASP.NET MVC與AJAX技術，我們可以實現文件異步上傳和實時顯示上傳進度的功能，從而提升用戶體驗。無論是用戶頭像上傳還是大文件上傳，都可以通過這種方式來解決問題，使得文件上傳變得更加簡潔、高效。