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


Posted in Javascript onJune 08, 2013

 做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址://img.jbzj.com/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 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
javascript的数组和常用函数详解
May 09 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
详解原生js实现offset方法
Jun 15 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 #Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 #Javascript
JavaScript String.replace函数参数实例说明
Jun 06 #Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 #Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 #Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 #Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 #Javascript
You might like
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
对python 读取线的shp文件实例详解
2018/12/22 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Django在Model保存前记录日志实例
2020/05/14 Python
Python类class参数self原理解析
2020/11/19 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
招商经理岗位职责
2013/11/16 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
个人近期表现材料
2014/02/11 职场文书
中青班党性分析材料
2014/02/16 职场文书
社区母亲节活动方案
2014/03/05 职场文书
2014年社区工作总结
2014/11/18 职场文书
简历自我评价模板
2015/03/11 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python