ASP.NET使用jQuery AJAX文件上传Demo_异步文件上传例子
2014-09-01 13:22:27  By: dwtedx

本文提供了一种简单的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
	});
});


最后给大家献上源代码链接: http://dwtedx.com/download.html?bdkey=s/1o6p0NxC 密码: fqyw

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+