脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ajaxfileupload插件上传无刷新

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

 更新时间：2013年06月08日 10:57:57   作者：  
利用ajaxfileupload插件实现文件上传无刷新的具体方法，需要的朋友可以参考一下

 做项目的时候遇到了这样一个问题,如果用普通的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上传文件，页面不会刷新，有需要的试试吧。

您可能感兴趣的文章:

相关文章

  • 基于JS实现漫画中大雨滂沱的效果

    基于JS实现漫画中大雨滂沱的效果

    这篇文章主要为大家详细介绍了如何利用JavaScript实现漫画中大雨滂沱的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • js实现web调用摄像头 js截取视频画面

    js实现web调用摄像头 js截取视频画面

    这篇文章主要为大家详细介绍了JS web调用摄像头，截取视频画面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-04-04
  • Layer+Echarts构建弹出层折线图的方法

    Layer+Echarts构建弹出层折线图的方法

    今天小编就为大家分享一篇Layer+Echarts构建弹出层折线图的方法，具有很的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • node.js chat程序如何实现Ajax long-polling长链接刷新模式

    node.js chat程序如何实现Ajax long-polling长链接刷新模式

    node.js chat是node.js作者用JS写的一个多人聊天工具， 源代码公开下载，网址是chat.nodejs.org。作者用这个小例子，来展示如何用nodejs开发高效率的应用程序。对于nodejs的学习者来说，是一个很好的例子
    2012-03-03
  • 微信小程序自定义导航栏（模板化）

    微信小程序自定义导航栏（模板化）

    这篇文章主要为大家详细介绍了微信小程序自定义导航栏（模板化），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • javaScript日期工具类DateUtils详解

    javaScript日期工具类DateUtils详解

    这篇文章主要为大家详细介绍了javaScript日期工具类DateUtils，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 第一次接触神奇的Bootstrap表单

    第一次接触神奇的Bootstrap表单

    第一次接触神奇的Bootstrap表单，Bootstrap让Web开发更迅速、更简单，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript中fromCharCode 和 fromCodePoint 的详解与应用小结

    JavaScript中fromCharCode 和 fromCodePoint 的详解与应

    本文将详细介绍 JavaScript 中的 String.fromCharCode 和 String.fromCodePoint 方法,这两个方法能够帮助开发者高效地处理字符与编码之间的转换,理解它们的区别与应用,将让你的代码更加灵活和高效,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • JS数组去重的九种高阶方法（亲测有效）

    JS数组去重的九种高阶方法（亲测有效）

    这篇文章主要给大家介绍了关于JS数组去重的九种高阶方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • JavaScript 调试器简介

    JavaScript 调试器简介

    JavaScript 调试器其实有很多。当然这些仅仅是调试器而已，与流行的 Java IDE 是没有办法相提并论的。
    2009-02-02

最新评论