利用ajaxfileupload插件实现文件上传无刷新的具体方法
利用ajaxfileupload插件实现文件上传无刷新的具体方法
发布时间:2016-12-30 来源:查字典编辑
摘要:做项目的时候遇到了这样一个问题,如果用普通的ASP.NETFileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就...

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

ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.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一般处理程序中的代码

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类