利用ajaxfileupload插件实现无刷新文件上传

做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://www.phpletter.com/DOWNLOAD/)

ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件

直接上代码吧

JS代码

 //执行AJAX上传文件
 $.ajaxFileUpload({
	url: '/Web/Teacher/ImportAchievements.ashx',secureuri: false,fileElementId: 'fulAchievements',dataType: 'json',success: function (data,status) {
		alert(data[0]);
	}
 });

说明:

1.这个方法很像大家熟知的$.ajax方法

2.参数说明

url：AJAX的后台代码文件，要接收前台传来的文件数据

secureuri：是否对上传的文件加密

fileElementId：HTML中<input type="file"/>上传控件的Id值，这里需要注意的是，后台代码是通过name-value的形式接收数据的，所以后台代码是通过name来接收数据的，而不是Id（根本原因是，这个方法会自动生成一个表单，将表单提交给后台代码处理）。

dataType：数据类型，一般是‘json’

success：上传成功后执行的回调函数

ASP.NET一般处理程序中的代码

public void ProcessRequest (HttpContext context) {
	context.Response.ContentType = "text/html";//这里很关键，虽然前台数据类型是json，但这里一定要写html
	//获取前台传来的文件
	HttpFileCollection files = HttpContext.Current.Request.Files;
	//将文件保存在网站目录中
	files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
	//返回用json数据格式表示的提示
	string result = "[" + "\"" + "成绩导入成功" + "\"" + "]";
	context.Response.Write(result);
        
}

这样就实现了AJAX上传文件，页面不会刷新，有需要的试试吧。