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 collection
		var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];
		if (httpPostedFile != null)
		{
			// Validate the uploaded image(optional)
			// Get the complete file path
			var fileSavePath = Path.Combine(HttpContext.Current
				.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);
			// Save the uploaded file to "UploadedFiles" folder
			httpPostedFile.SaveAs(fileSavePath);
		}
	}
}

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

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

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
	});
});