转自：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. 转:Java NIO系列教程(六) File Channel

    Java NIO中的FileChannel是一个连接到文件的通道.可以通过文件通道读写文件. FileChannel无法设置为非阻塞模式,它总是运行在阻塞模式下. 打开FileChannel 在使用F ...

  2. C语言中strstr函数

    头文件:#include <string.h> strstr()函数用来检索子串在字符串中首次出现的位置,其原型为:    char *strstr( char *str, char * ...

  3. Session超时处理

    1.web.xml 添加配置: <!-- session超时 --> <filter> <filter-name>sessionFilter</filter- ...

  4. 模板插件aTpl

    摘要: 前面给大家分享了一款js模板插件,后来经过完善推荐给大家.该插件支持ie5+,chrome等浏览器以及移动端浏览器,支持for和if语法,以及表达式. 项目地址:https://github. ...

  5. POJ 1191 棋盘分割

    棋盘分割 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11213 Accepted: 3951 Description 将一个 ...

  6. JS获取汉字首字母

    //获取 汉字首字母 function makePy(str) { if (typeof (str) != "string") throw new Error(-1, " ...

  7. 成为Android高手必须掌握的28大项内容和10个建议

    (一)成为Android高手必须掌握的8项基本要求 [1] Android操作系统概述1. Android系统架构.           2. Android利用设计理念.           3. ...

  8. [Effective JavaScript 笔记]第42条：避免使用轻率的猴子补丁

    41条对违反抽象原则行为的讨论之后,下面聊一聊终极违例.由于对象共享原型,因此每一个对象都可以增加.删除或修改原型的属性.这个有争议的实践通常称为猴子补丁. 猴子补丁示例 猴子补丁的吸引力在于其强大. ...

  9. cocos2d调度器（定时执行某函数）

    调度器(scheduler) 继承关系 原理介绍 Cocos2d-x调度器为游戏提供定时事件和定时调用服务.所有Node对象都知道如何调度和取消调度事件,使用调度器有几个好处: 每当Node不再可见或 ...

  10. sed替换字符串时，使用正则表达式的注意事项

    sed的使用方法为: 使用单个模式替换:sed 's/pattern/replacement/flags' filename,例如echo 'abc' | sed 's/a/A/'-->Abc ...