ASP.NET使用JQUERY AJAX文件上传DEMO_异步文件上传例子

转载于：http://dditblog.com/itshare_195.html

本文提供了一种简单的ASP.NET Web API的文件上传方式、使用jQuery AJAX的方式上传图片文件

接下来我将展示如何添加一个Web API的控制器、以及使用它上传文件

步骤：

1、添加一个空的ASP.NET Web应用程序，我使用了Visual Studio2013创建了这个演示应用程序

2、然后在接下来的窗口使用ASP.NET Web应用程序的类型、选择“空”、然后单击“确定”按钮

这样一个空的Web应用程序就创建好了，其中包含packages.config和Web.config文件

3、添加“Global.asax”文件，该文件是为ASP.NET Web应用程序是必不可少的、在Visual Studio中用鼠标右键单击该项目

选择添加 ->新建项目->添加新项、从列表中选择“Global Application Class”文件

4、接着我们要添加ASP.NET Web API包到项目中、右键单击该项目、选择“管理的NuGet包”

5、现在我们已经成功地安装了Web API包、让我们添加一个简单的类，作为控制器管理文件的上传

用鼠标右键单击该项目，选择添加 ->类、将它命名为、如“FileUploadController.cs”

public class FileUploadController : ApiController

6、增加了控制器、我们需要注册这个控制器的路由、这时就要用到“Global.asax.cs”文件了

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

7、在FileUploadController.cs文件中添加一个操作方法（action）、将处理文件上传操作

[HttpPost]

public void UploadFile(){if (HttpContext.Current.Request.Files.AllKeys.Any()){// Get the uploaded image from the Files collectionvar httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];if (httpPostedFile != null){// Validate the uploaded image(optional)// Get the complete file pathvar fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);// Save the uploaded file to "UploadedFiles" folderhttpPostedFile.SaveAs(fileSavePath);}}}

8、添加一个aspx网页、做为上传文件的页面、并添加代码

<div><label for="fileUpload">Select File to Upload: </label><input id="fileUpload" type="file" /><input id="btnUploadFile" type="button" value="Upload File" /></div>

9，加入jQuery代码来保存文件

$(´#btnUploadFile´).on(´click´, function () {var data = new FormData();var files = $("#fileUpload").get(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) {// Do other operation});});