利用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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
13个PHP函数超实用
Oct 21 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
three.js实现3D视野缩放效果
Nov 16 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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获取网页内容方法总结
2008/12/04 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
jQuery插件的写法分享
2013/06/12 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
python安装以及IDE的配置教程
2015/04/29 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python 备份程序代码实现
2017/03/06 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
就业自荐信
2013/12/04 职场文书
学校安全防火方案
2014/06/07 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
趵突泉导游词
2015/02/03 职场文书
学习保证书100字
2015/02/26 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android