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网页、做为上传文件的页面、并添加代码

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