利用ajaxfileupload插件实现文件上传无刷新的具体方法

ajaxfileupload插件实现无刷新上传

在项目开发过程中，若使用常规的ASP.NET FileUpload控件进行文件上传，会导致整个页面刷新，进而使通过JavaScript动态生成的页面元素丢失。为了避免上传文件时页面刷新，ajaxfileupload插件提供了良好的解决方案（插件下载地址://img.jbzj.com/file_images/article/201306/js/ajaxfileupload.js）。

ajaxfileupload作为jQuery的一个扩展插件，使用时必须同时引入jQuery.js文件。

下面直接展示具体代码实现。

前端JS代码配置

前端JS代码部分

[javascript]

//执行AJAX上传文件
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
success: function (data, status) {
alert(data[0]);
} 
}); 
//执行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处理程序实现

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

[csharp]

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);
} 
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上传文件，页面不会刷新，有需要的试试吧。