使用jQuery AJAX在ASP.NET Web API中上传文件

在本文中,将探讨如何使用jQueryAJAXASP.NETWeb API中上传文件。这涉及到在ASP.NET Web应用程序中添加Web API控制器,并通过jQuery AJAX将文件内容上传到控制器的特定操作。

步骤概述

以下是实现此功能的详细步骤:

首先,需要创建一个新的ASP.NET Web应用程序。使用Visual Studio 2013,点击“新建项目”,然后选择“Visual C#”,接着选择“ASP.NET Web应用程序”。为应用程序命名,然后点击“确定”按钮。接下来,选择“空”模板并点击“确定”,这将创建一个包含packages.config和Web.config文件的空Web应用程序。

ASP.NET Web应用程序需要Global.asax文件。在Visual Studio中,右键点击项目,选择“添加”->“新建项”,然后选择“全局应用程序类”文件。

接下来,需要向项目中添加ASP.NETWeb API包。右键点击项目,选择“管理Nuget包”。在“管理Nuget包”窗口中,选择“在线”标签页,搜索“Microsoft.AspNet.WebApi”,然后选择“Microsoft ASP.NET Web API 2.2”并点击“安装”按钮。如果需要接受许可证,请点击“接受”按钮。

现在,添加一个简单的类作为控制器。右键点击项目,选择“添加”->“类”,并将其命名为“FileUploadController.cs”。按照ASP.NETWeb API的约定,所有控制器类文件名都以“controller”结尾。

为了注册控制器的路由,需要编辑Global.asax.cs文件。在GlobalConfiguration.Configure方法中,注册一个路由,如下所示:

GlobalConfiguration.Configure(config => { config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); });

在这里,{controller}、{action}和{id}是路由的关键字。Web API控制器注册了一个以“/api”为前缀的路由。

在FileUploadController.cs文件中,添加一个处理文件上传操作的方法。

[HttpPost] public void UploadFile() { if (HttpContext.Current.Request.Files.AllKeys.Any()) { var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"]; if (httpPostedFile != null) { var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName); httpPostedFile.SaveAs(fileSavePath); } } }

UploadFile()方法/操作只能通过POST请求访问,因为它被分配了[HttpPost]属性。上传的文件将被保存到“UploadedFiles”文件夹中。可以通过右键点击项目并选择“添加”->“新建文件夹”来添加一个空文件夹。

接下来,添加一个.aspx页面用于上传文件。右键点击项目,选择“添加”->“新建项”,从“添加新项”窗口中选择“Web表单”,并为其命名。将新添加的.aspx页面设置为项目的起始页面。为此,右键点击.aspx页面,从上下文菜单中选择“设为起始页面”选项。

在.aspx页面中,添加HTML控件,例如文件上传控件和按钮。文件上传控件允许用户浏览并选择要上传的文件,然后在点击按钮时上传文件。

<div> <label for="fileUpload">选择要上传的文件:</label> <input id="fileUpload" type="file" /> <input id="btnUploadFile" type="button" value="上传文件" /> </div>

最后,需要添加jQuery代码,将文件内容添加到FormData的集合中。首先,从Google CDN库添加对jQuery的引用:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

接下来,添加以下代码,将文件内容添加到FormData的集合中:

<script type="text/javascript"> $(document).ready(function() { $('#btnUploadFile').on('click', function() { var data = new FormData(); var files = $('#fileUpload')[0].files; if (files.length > 0) { data.append("UploadedImage", files[0]); } var ajaxRequest = $.ajax({ type: "POST", url: "/api/fileupload/uploadfile", contentType: false, processData: false, data: data }); ajaxRequest.done(function(xhr, textStatus) { // 进行其他操作 }); }); }); </script>

在这里,向FileUploadController.cs文件中的UploadFile()操作发送了一个jQueryAJAX请求,路径为“/api/fileupload/uploadfile”。注意:contentType和processData设置为false非常重要。

现在,可以运行应用程序,并从“FileUploadTest.aspx”页面(如果在步骤#8中给了其他名称,可能会有所不同)上传文件。

如果想上传大文件(最大2GB),则需要更改Web.config文件中的<httpRuntime>和<requestLimits>默认设置,如下所示:

<system.web> <httpRuntime executionTimeout="240000" maxRequestLength="2147483647" /> </system.web> <security> <requestFiltering> <requestLimits maxAllowedContentLength="4294967295" /> </requestFiltering> </security>

executionTimeout是请求被ASP.NET自动关闭之前允许执行的最大秒数。默认值:对于ASP.NET 1.x是90秒,对于ASP.NET 2.0或更高版本是110秒。最大值:理论上,其最大值是TimeSpan的最大值,即10675199.02:48:05.4775807。在debug模式下,此设置的值将被忽略。

maxRequestLength是允许的最大请求长度。值以K.B(千字节)为单位。默认值:4MB。最大值:理论上,其最大值是int的最大值,即2147483647。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485