转自：http://www.cnblogs.com/linjiqin/p/3530848.html

jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。

1、引入AjaxFileUpload插件相关的js

<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>

<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>

备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。

2、实现上传功能代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ include file="/base.jsp" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>ajax文件上传</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />

    <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>

    <script type="text/javascript">

    $(function(){

       //上传图片

       $("#btnUpload").click(function() {

               alert(ajaxFileUpload());

       });

    });

    function ajaxFileUpload() {

        // 开始上传文件时显示一个图片

        $("#wait_loading").ajaxStart(function() {

            $(this).show();

        // 文件上传完成将图片隐藏起来

        }).ajaxComplete(function() {

            $(this).hide();

        });

        var elementIds=["flag"]; //flag为id、name属性名

        $.ajaxFileUpload({

            url: 'uploadAjax.htm',

            type: 'post',

            secureuri: false, //一般设置为false

            fileElementId: 'file', // 上传文件的id、name属性名

            dataType: 'text', //返回值类型，一般设置为json、application/json

            elementIds: elementIds, //传递参数到服务器

            success: function(data, status){

                alert(data);

            },

            error: function(data, status, e){

                alert(e);

            }

        });

        //return false;

    }

    </script>

  </head>

  <body>

    <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">

        <div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>

        <br></br>

        <div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div>

        <br></br>

    </div>

    <input type="file" id="file" name="file"><br/>

    <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>

    <input type="button" id="btnUpload" value="上传图片" />

  </body>

</html>

jQuery插件AjaxFileUpload实现ajax文件上传的更多相关文章

  1. jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因

    今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...

  2. jQuery插件之ajaxFileUpload（ajax文件上传）

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...

  3. jQuery插件之路(三)——文件上传（支持拖拽上传）

    好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下, ...

  4. jquery.form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  5. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  6. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  7. 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  8. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  9. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

随机推荐

  1. Linux中用st_mode判断文件类型

    Linux中用st_mode判断文件类型 2012-12-11 12:41 14214人阅读 评论(4) 收藏 举报  分类: Linux(8)  C/C++(20)  版权声明:本文为博主原创文章, ...

  2. MySQL 5.6 Warning: Using a password on the command line interface can be insecure

    MySQL 5.6 在命令行输入密码,就会提示这些安全警告信息. Warning: Using a password on the command line interface can be inse ...

  3. HDU 4858 项目管理（邻接表 暴力模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4858 我们建造了一个大项目!这个项目有n个节点,用很多边连接起来,并且这个项目是连通的! 两个节点间可 ...

  4. [Effective JavaScript 笔记]第55条：接收关键字参数的选项对象

    53节建议保持参数顺序的一致约定对于帮助程序员记住每个参数在函数调用中的意义很重要.参数较少这个主意不错,但如果参数过多后,就出现麻烦了,记忆和理解起来都不太容易. 参数蔓延 如下面这些代码: var ...

  5. 【SpringMVC】SpringMVC系列9之Model数据返回到View

    9.Model数据返回到View 9.1.概述     Spring MVC 提供了以下几种途径输出模型数据: ModelAndView: 处理方法返回值类型为 ModelAndView 时, 方法体 ...

  6. JavaScript Math 对象方法

    Math 对象方法 方法 描述 abs(x) 返回数的绝对值. acos(x) 返回数的反余弦值. asin(x) 返回数的反正弦值. atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值 ...

  7. css行内样式

    <title>归园田居</title> </head> <body> <h2>归园田居</h2> <p>种豆南山下, ...

  8. Extjs给gridPanel添加单价双击事件和获取当前行的数据

    有两个小属性,如下 this.on('rowdblclick', this.readContent, this); this.on('cellclick', this.gridCellClick, t ...

  9. HDU2067卡特兰数

    小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  10. CUDA学习笔记（三）——CUDA内存

    转自:http://blog.sina.com.cn/s/blog_48b9e1f90100fm5f.html 结合lec07_intro_cuda.pptx学习 内存类型 CGMA: Compute ...