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

做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://zsrimg.ikafan.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上传文件，页面不会刷新，有需要的试试吧。

赞 (0)

相关推荐

  • jQuery插件AjaxFileUpload实现ajax文件上传

    本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码 代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/

  • 使用AjaxFileUpload.js实现异步文件上传示例

    ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u

  • AjaxFileUpload+Struts2实现多文件上传功能

    AjaxFileUpload+Struts2实现多文件上传功能

    本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能,具体实现代码大家参考下本文. 单文件和多文件的实现区别主要修改两点, 一是插件ajaxfileupload.js里接收file文件ID的方式 二是后台action是数组形式接收 1.ajaxFileUpload文件下载地址http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 2.引入jquery-1.8.0.min.js.ajaxFileUpload.js文件 3.文

  • JavaEE中struts2实现文件上传下载功能实例解析

    JavaEE中struts2实现文件上传下载功能实例解析

    本文实例为大家分享了struts2实现文件上传下载的具体实现代码,供大家参考,具体内容如下 一.文件上传 struts提交的文件组件上传, 前台: 1).提交方式POST 2).表单类型 multipart/form-data 3).input type=file 后台: Apache提供的FileUpload组件 核心类: FileItemFactory FileItem的工厂 ServletFileUpload servlet 中的文件上传的核心类 FileItem 封装了上传的表单文件项的

  • JavaWeb中struts2实现文件上传下载功能实例解析

    在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来比较繁琐,而且不灵活,在学习了struts2后,struts2为文件上传下载提供了更好的实现机制,在这里我分别就单文件上传和多文件上传的源代码进行一下讲解,这里需要导入文件下载上传的两个jar文件,一个是commons-fileupload-1.2.2.jar,另一个是commons-io-2.0.

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

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

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

  • PHP利用APC模块实现文件上传进度条的方法

    本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在

  • php文件上传的两种实现方法

    文件上传一般有下面2种方式: 有两种: 1.标准input表单方式,典型的用$_FILES进行接收: 2.以Base64的方式进行传送,一般是AJAX异步上传. 第一种 标准的input表单方式,适用于大文件进行上传,同时支持批量.html代码关键的几句: <form enctype="multipart/form-data" method="post" action="upload.php""> <input typ

  • Django实现任意文件上传（最简单的方法）

    利用Django实现文件上传并且保存到指定路径下,其实并不困难,完全不需要用到django的forms,也不需要django的models,就可以实现,下面开始实现. 第一步:在模板文件中,创建一个form表单,需要特别注意的是,在有文件上传的form表单中,method属性必须为post,而且必须指定它的enctype为"multipart/form-data",表明不对字符进行编码,具体的代码如下: <form enctype="multipart/form-dat

  • java实现将文件上传到ftp服务器的方法

    本文实例讲述了java实现将文件上传到ftp服务器的方法.分享给大家供大家参考,具体如下: 工具类: package com.fz.common.util; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; imp

  • PHP 文件上传后端处理实用技巧方法

    PHP 文件上传后端处理实用技巧方法 引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上传的文件大一点!那么,本文就来说说,后端处理都有些什么技巧吧! 业务场景一.我们只会选择一个单个的文件上传,而且不需要做一些即时的验证工作.那么,也许并没有什么优化可言了,因为,最后你要做的,只是将这个文件放在表单里最后一起提交,直接处理即可! 业务场景二.需要

  • NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

    NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置.这里我用的express框架是3.21.2版本. 我们来简单介绍下拖拽效果是怎么实现的. 这里先看代码: <!DOCTYPE html> <html lang=

  • Mac本地文件上传到CentOS云服务器方法

    Mac本地文件上传到CentOS云服务器方法

    Mac本地文件上传到CentOS中,可以使用scp指令可以完成 ContOS端安装openssh-clients 通过yum安装执行 yum install openssh-clients Mac端使用scp指令上传文件 打开终端,进入你要上传的文件目录下,使用scp指令上传文件 scp (你要上传的文件)root@(你的服务器域名或者IP):/(服务器存放路径) 总结 以上所述是小编给大家介绍的Mac本地文件上传到CentOS云服务器方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编

  • ajaxFileupload实现多文件上传功能

    打开google 搜索"ajaxFileupload' '多文件上传"可以搜到许许多多类似的,那我为什么还要写一下呢? 一个是对之前大神的贡献表示感谢:二个是自己知识的总结:三个是自己在原有的基础上改动了下,在此记录,可能帮助其他朋友. 用过这个插件的都知道这个插件的基本用法,我就不废话,直接上代码. 我需要实现多个文件上传,之前的做法是定义多个不同id的input,然后把ajaxfileuplod方法放在for循环里,这个方法是在网上看到的,我觉得不怎么好,后面在网上找到的,就高级点

随机推荐