转自：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. HDU4887_Endless Punishment_BSGS+矩阵快速幂+哈希表

    2014多校第一题,当时几百个人交没人过,我也暴力交了几发,果然不行. 比完了去学习了BSGS才懂! 题目:http://acm.hdu.edu.cn/showproblem.php?pid=4887 ...

  2. ExtJS学习之路第三步：理解引擎之下,ExtJS4中的类

    写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...

  3. POJ 3349 Snowflake Snow Snowflakes

    Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 27598 Accepted: ...

  4. 入门必看--JavaScript基础

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. ...

  5. The content of element type "package" must match "(result-types?,interceptors?...

    错误:“The content of element type "package" must match "(result-types?,interceptors?,de ...

  6. Linux lsof详解

    简介 lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控 ...

  7. 简单制作 OS X Yosemite 10.10 正式版U盘USB启动安装盘方法教程

    转自: http://www.iplaysoft.com/osx-yosemite-usb-install-drive.html http://jingyan.baidu.com/article/02 ...

  8. 《ASP.NET1200例》解决母版页报错“内容控件必须是内容页中的顶级控件，或是引用母版页的嵌套母版页。”

    VS2005下,添加了母版页这个控件,我们可以讲N个页面中共同的部分放在母版页来实现,并让WEB窗体集成自我们的母版页,就可以让我们的站点具有统一的风格了.在VS2005SP1之前的版本中,我们只能创 ...

  9. Binary Tree Right Side View

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  10. Backpack | & ||

    Backpack | Given n items with size Ai, an integer m denotes the size of a backpack. How full you can ...