ASP.NET MVC 文件上传全攻略：从基础到Ajax

"Asp.net MVC 文件上传教程" 在Asp.net MVC框架中，文件上传是一项常见的需求，本文将深入探讨这一主题。首先，我们从最基本的文件上传开始，然后逐步添加用户界面增强和数据库存储，最后涉及AJAX无刷新上传。 1. **基本文件上传** 在Asp.net MVC中，文件上传通常通过HTML表单实现，利用`<input type="file">`标签让用户选择文件。在视图(View)中，创建一个表单并提交到控制器(Controller)。控制器接收到文件后，将其保存到服务器，并进行重定向操作。例如，视图可能包含以下代码： ```html <form action="/Home/Upload" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="上传" /> </form> ``` 控制器相应地处理文件： ```csharp [HttpPost] public ActionResult Upload(HttpPostedFileBase file) { if (file != null && file.ContentLength > 0) { string fileName = Path.GetFileName(file.FileName); file.SaveAs(Server.MapPath("~/uploads/" + fileName)); } return RedirectToAction("Index"); } ``` 2. **jQuery UI增强** 为了提升用户体验，可以使用jQuery UI库创建更美观的上传界面。例如，可以添加一个模态对话框来显示文件选择控件。这涉及到添加jQuery UI CSS和JavaScript库，以及编写JavaScript代码来控制对话框的显示和隐藏。 3. **图片上传与显示** 图片上传后，不仅需要存储图片，还要获取其元信息（如创建时间、大小和名称）。这可以通过自定义的`FileRepository`类来实现，它将文件信息保存到列表中，然后在视图中显示。同时，可以将图片存储在服务器的文件系统或数据库中。 如果选择将图片存储在数据库，需要创建对应的数据库表，使用ADO.NET DataModel生成EDMX文件，然后编写控制器和视图代码来处理文件的上传和检索。 4. **AJAX文件上传** 为了实现无刷新的文件上传，可以使用jQuery Form插件。首先，需要在项目中引入jQuery Form库，然后在提交表单时调用其异步上传方法。这样，文件上传可以在后台完成，而不会打断用户的交互流程。 ```javascript $('#uploadForm').ajaxSubmit({ success: function (response) { // 处理成功回调 }, error: function () { // 处理错误回调 } }); ``` 5. **显示上传的图片列表** 显示多张图片的列表，可以通过遍历控制器传递给视图的文件信息列表，生成相应的HTML代码来展示每张图片。如果图片存储在数据库，查询数据库并动态创建图片的`<img>`标签。 Asp.net MVC提供了多种方式处理文件上传，从基本的表单提交到复杂的AJAX无刷新上传，结合jQuery UI和其他前端库，可以创建功能丰富且用户体验良好的文件上传功能。然而，每个解决方案都有其优缺点，需要根据具体需求选择最适合的方法。