转自：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. c#接口和抽象类对比学习

    什么是接口? 接口就是一种规范,协议(*),约定好遵守某种规范就可以写通用的代码. 定义了一组具有各种功能的方法.接口描述的是一种能力,具有这种能力的事物可以没任何关系.比如: public inte ...

  2. linux下面覆盖文件，如何实现直接覆盖，不提示

    转自:http://w-tingsheng.blog.163.com/blog/static/2505603420124309130528/ cp覆盖时,无论加什么参数-f之类的还是提示是否覆盖,当文 ...

  3. 移动前端调式页面--weinre

    一:远程调式工具---weinre 阅读目录 一:远程调式工具---weinre 二: 安装weinre 三: 访问weinre及在页面上调用 四:多用户 回到顶部 一:远程调式工具---weinre ...

  4. Hello Kitty微信主题很可爱?小心财产安全!

    个性化是产品服务的一个趋势.微信很火,可为什么微信主题只有一个呢?你让那些小女生情何以堪?这时HelloKitty微信主题.大嘴猴.哆啦A梦等一大批主题在网上出现了,有些打着免费的旗号却做着盗号的勾当 ...

  5. [Effective JavaScript 笔记]第30条：理解prototype、getPrototypeOf和__ptoto__之间的不同

    原型包括三个独立但相关的访问器.这三个单词都是对单词prototype做了一些变化. C.prototype用于建立由new C()创建的对象的原型 Object.getPrototypeOf(obj ...

  6. 5 个最受人喜爱的开源 Django 包

    导读 Django 围绕“可重用应用”的思想建立:自包含的包提供了可重复使用的特性.你可以将这些可重用应用组装起来,在加上适用于你的网站的特定代码,来搭建你自己的网站.Django 具有一个丰富多样的 ...

  7. 第12章 使用Samba或NFS实现文件共享

    章节简述: 本章节为读者讲述文件共享系统的作用,了解Samba与NFS服务程序的开发背景以及用法. 详细逐条讲解Samba服务配置参数,演示安全共享文件的配置策方法,并使用autofs服务程序自动挂载 ...

  8. 变色龙安装程序 Chameleon Install 2.2 svn 2281发布

    变色龙安装程序 Chameleon Install 2.2 svn 2281发布 1.更好的支持10.9 Mavericks2.更新ATi.nVidia显卡支持列表3.添加新的 CPU Model I ...

  9. Leetcode 之Construct Binary Tree（52）

    根据先序和中序构造二叉树.根据中序和后序构造二叉树,基础题,采用递归的方式解决,两题的方法类似.需要注意的是迭代器的用法. //先序和中序 TreeNode *buildTree(vector< ...

  10. DataSnap 用TStream 传递大数据 返回流大小为-1的情况

    DataSnap可以直接传递和返回TStream类型的参数,这点是很方便的.但是很多人发现好像大小稍微大点就工作不正常了,就变相使用其它类型转换来转换去,这样便利性就失去了. 官方有篇博客很详细的介绍 ...