在 .Net 8.0 中使用 AJAX 在 ASP.NET Core MVC 中上传文件

上传文件是现代 Web 应用程序中的常见要求。在 ASP.NET Core MVC 中，高效处理文件上传可以提高应用程序的可用性和性能。在本文中，我们将探讨如何使用 AJAX 在 ASP.NET Core MVC 应用程序中实现文件上传，通过允许文件上传而无需刷新整个页面，从而提供更流畅的用户体验。

先决条件
要学习本教程，您应该具备以下条件：

您的机器上安装了 .NET 8 SDK。
对 ASP.NET Core MVC 和 C# 有基本的了解。
熟悉 AJAX 和 JavaScript。

设置项目
首先创建一个新的 ASP.NET Core MVC 项目。您可以使用 .NET CLI 执行此操作：

dotnet new mvc -n AjaxFileUpload
cd AjaxFileUpload

此命令创建一个名为的新项目AjaxFileUpload并设置基本的MVC结构。

添加文件上传功能

第一步：更新模型
创建一个模型来表示用户的文件输入。虽然对于简单的文件上传，您可能不需要复杂的模型，但使用模型传递数据是一种很好的做法：

public class FileUploadModel
{
public IFormFile File { get; set; }
}

第二步：创建视图
Views/Home在名为下添加一个新的视图Index.cshtml。此视图将包含用于上传文件的表单：

@{
ViewData["Title"] = "Home Page";
}

界面预览
使用 AJAX 在 ASP.NET Core MVC 应用程序中实现文件上传功能后，您将看到如下图所示的界面。此界面包含一个“选择文件”按钮，允许用户选择他们想要上传的文件。选择文件后，文件名将显示在按钮旁边。要将选定的文件上传到服务器，用户可以单击“上传”按钮。此过程由 AJAX 在后台处理，确保流畅无缝的用户体验，无需刷新页面。

第三步：添加控制器动作

在您的中HomeController添加一个操作来处理文件上传：

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Threading.Tasks;

public class HomeController : Controller
{
[HttpPost]
public async Task<IActionResult> UploadFile(IFormFile file)
{
if (file != null && file.Length > 0)
{
var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", file.FileName);

using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}

return Json(new { success = true, message = "File uploaded successfully" });
}

return Json(new { success = false, message = "No file uploaded" });
}
}

此操作接收上传的文件并将其保存到wwwroot/uploads目录中。

理解文件上传控制器方法
屏幕截图展示了UploadFile控制器中操作方法的一部分，用于处理 ASP.NET Core MVC 应用程序中的文件上传。此方法接受一个类型的参数IFormFile，这是 ASP.NET Core 提供的一个处理上传文件的特殊接口。

控制器方法的要点：
参数检查：该方法首先检查上传的文件（file）是否不为空，以及文件大小是否大于0，以确保文件确实已经上传，且不为空。

文件存储：如果存在有效文件，该方法将使用计算存储文件的路径Path.Combine。这会将当前目录的路径与子目录和文件名结合起来，确保文件保存在指定位置 (wwwroot/uploads)。

文件保存：使用 FileStream 保存文件。该using语句确保在文件保存后正确处理 FileStream，这对于释放系统资源和避免文件锁定问题至关重要。

响应：成功保存文件后，该方法返回 JSON 响应，表示成功。如果没有上传文件，则返回不同的 JSON 响应，表示失败。

关于IFormFile：
用法：IFormFile 是一个表示随发送的文件的接口HttpRequest。它提供用于访问已上传文件的元数据和内容的属性和方法。

属性：关键属性包括FileName、ContentType（文件的 MIME 类型）和Length（文件的大小（以字节为单位））。

方法：它包括诸如等方法CopyToAsync，将上传文件的内容复制到目标流，从而实现异步文件处理。

这种方法可确保高效安全地处理文件上传，并向用户提供有关上传状态的清晰反馈。通过集成 AJAX，文件上传过程不需要重新加载页面，从而增强了整体用户体验。