在本文中,将探讨如何使用jQueryAJAX在ASP.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。