转自：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. [实战]MVC5+EF6+MySql企业网盘实战(28)——其他列表

    写在前面 本篇文章将实现,其他文件类型的列表. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF ...

  2. HTML常见标签总结

    什么是浏览器 解释和执行HTML源码的工具 五大浏览器:IE.FF(FireFox)(火狐).Chrome(谷歌).Opera(空中).Safari(Apple)(苹果) IE用的是Trident引擎 ...

  3. Linux系统日志及日志分析

    Linux系统日志及日志分析   Linux系统拥有非常灵活和强大的日志功能,可以保存几乎所有的操作记录,并可以从中检索出我们需要的信息. 大部分Linux发行版默认的日志守护进程为 syslog,位 ...

  4. JavaScript的Eval与JSON.parse的区别

    JavaScript的Eval与JSON.parse的区别 json的定义以及用法: JSON(JavaScript Object Notation)是一种轻量级的数据格式,采用完全独立于语言的文本格 ...

  5. #iPhone6与iPhone6Plus适配#如何在Xcode 6中创建 PCH 文件

    本文永久链接http://www.cnblogs.com/ChenYilong/p/4008086.html   新建文件 ⌘+N选择 iOS/Mac -> Other -> PCH Fi ...

  6. 经典sql语句

    经典SQL语句大全 一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql serv ...

  7. php substr中文乱码最有效到解决办法 转：http://blog.sina.com.cn/s/blog_49b531af0100esah.html

    (2009-07-29 12:29:38) 转载▼ 标签: php substr文乱码 网站开发 it   直接使用PHP函数substr截取中文字符可能会出现乱码,主要是substr可能硬生生的将一 ...

  8. poj2568

    Y2K Accounting Bug Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11275   Accepted: 56 ...

  9. Bellman-Ford算法

    #include<stdio.h> #define max 0xffffff ][]; //图的邻接矩阵 ]; int n;//顶点个数 int m;//边个数 struct Edge { ...

  10. Copy List with Random Pointer

    A linked list is given such that each node contains an additional random pointer which could point t ...