Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。而且是Ajax的，省去了自己写Ajax上传功能的麻烦。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在J2EE中的使用。

1.引入头文件（jQuery放前面，而且不能有多个JQuery）

注意：uploader是上传的Action路径名；formData是传递给Action的参数列表。

     <script type="text/javascript" src="js/jquery-1.6.2.js"></script>
	 <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
     <script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script>
  </head>

   <script >
      $(document).ready(function() {
            $("#file_upload").uploadify({
                    'buttonText' : '请选择',  //上传按钮显示内容，还有个属性可以设置按钮的背景图片
                    'height' : 30,
                    'swf' : 'js/uploadify/uploadify.swf',  // 控件flash文件位置
                    'uploader' : 'test/uploadFile.do',   // 后台处理的请求地址，后面追加了jsessionid，用来标示使用当前session（默认是打开新的session，会导致存在session校验的请求中产生302错误）
//                     'upload.action;jsessionid=<%=session.getId() %>',
//                     'upload.action ;jsessionid=${pageContext.session.id},
                    'cancelImg'      : 'js/uploadify/uploadify-cancel.png',
                    'width' : 120,
                    'fileSizeLimit' : '1000KB',
                 	'multi' : false,  // true 选择多文件上传
                    'auto':false,  // true自动上传
                    'fileObjName'   : 'file',  //文件对象名称,用于后台获取文件对象时使用,详见下面的java代码
                    'fileTypeExts' : '*.jpg;*.png;*.xls', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
//                  'overrideEvents' : ['onDialogClose'],  //不执行默认的onSelect事件
//     	        	'queueID':'file_upload',   //文件选择后的容器ID，与下面HTML的div.id对应
//     	       		'fileObjName':'myFile',//服务器端脚本使用的文件对象的名称 $_FILES个['upload']
//     	       		'buttonImage':'${pageContext.request.contextPath}/js/jquery.uploadify/uploadify-cancel.png', //浏览按钮的背景图片路径
//     	        	'width':'100',  //浏览按钮的宽度
//     	        	'height':'32',  //浏览按钮的高度
 					'onFallback' : function() {//检测FLASH失败调用
          				  alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
       				},
                    'onUploadSuccess' : function(file, data, response) {
                        alert( file.name + ' 上传成功！ ');
                        var obj = eval('('+data+')');
	           			alert(obj.message);
						// $('#showUploadMsg').html(obj.message);
                    }
                });
        });
     </script>

其他事件可以查询在线api 地址：  http://www.uploadify.com/documentation/

2. 上传按钮

<body>
    <input type="file" name="fileName" id="file_upload" />
    <a href="javascript:$('#file_upload').uploadify('upload', '*')">上传文件</a> | <a href="javascript:$('#file_upload').uploadify('stop')">停止上传!</a>
  </body>

3. 后台处理

	@RequestMapping(value = "/uploadFile.do", method = RequestMethod.POST)
	public String uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,
			HttpServletResponse response) throws IOException {

//		System.out.println(file.getOriginalFilename());
		System.out.println("成功！");
		String message = "测试测试";
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write("{\"message\":\"" + message + "\"}");
		response.getWriter().flush();
		return "jsp/index";
	}

下载/资料：

Uploadify官方网站：http://www.uploadify.com/

Uploadify下载：http://download.csdn.net/detail/leixiaohua1020/6376463

demo：链接：http://pan.baidu.com/s/1jGsv4Gm 密码：gcw4

jar : 链接：http://pan.baidu.com/s/1AmNgU 密码：8qn9

手册：链接：http://pan.baidu.com/s/1pJBikCr 密码：or37

jQuery 异步上传插件 Uploadify302 使用 （JavaEE Spring MVC）的更多相关文章

  1. JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...

  2. MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

  3. MVC文件上传01-使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

  4. Jquery异步上传文件

    我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...

  5. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  6. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  7. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  8. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  9. jQuery 文件上传插件：uploadify、swfupload

    jQuery 文件上传插件: uploadify.swfupload

随机推荐

  1. Mysql锁机制--写锁

    Mysql 系列文章主页 =============== 1 准备数据 1.1 建表 1.1.1 建立 Employee表 DROP TABLE IF EXISTS employee; CREATE ...

  2. flask的自带logger和celery的自带logger的使用

    在celery和flask框架中都有自带的logger使用方法.下面记录一下相关的使用. flask中使用logger flask中的app对象FLASK()自带了logger方法,其调用的方式为: ...

  3. 清空dataset中的某行某列的数据

    string tempSFZH = ""; foreach (DataRow rs in ds.Tables[0].Rows) {     tempSFZH = rs[ht[&qu ...

  4. spring的 @Scheduled的cron表达式

    网上太多说的多,但却没什么用的文章了 序号 说明 是否必填 允许填写的值         允许的通配符1       秒    是                0-59 ,             ...

  5. python笔记二（数据类型和变量、编码方式、字符串的编码、字符串的格式化）

    一.数据类型 python可以直接处理的数据类型有:整数.浮点数.字符串.布尔值.空值. 整数 浮点数 字符串:双引号内嵌套单引号,可以输出 i'm ok. 也可以用\来实现,\n 换行 \t tab ...

  6. NOIP2017D2T3 列队—Treap

    NOIP2017列队 Description Sylvia 是一个热爱学习的女孩子.  前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia所在的方阵中有n × m ...

  7. 王家林人工智能AI课程大纲和电子书 - 老师微信13928463918

    **3980元团购原价19800元的AI课程,团购请加王家林老师微信13928463918. 基于王家林老师独创的人工智能"项目情景投射"学习法,任何IT人员皆可在无需数学和Pyt ...

  8. SRAM/DRAM,PROM/EPROM/EEPROM,NOR/NAND FLASH区别

                          SRAM/DRAM,PROM/EPROM/EEPROM,NOR/NAND FLASH区别 RAM / ROM 存储器 ROM和RAM指的都是半导体存储器,R ...

  9. JVM概述

    JVM是什么 JVM全称是Java Virtual Machine(java虚拟机).它之所以被称之为是"虚拟"的,就是因为它仅仅是由一个规范来定义的抽象计算机.我们平时经常使用的 ...

  10. Hive-ORC文件存储格式（续）

    本文在Hive-ORC文件存储格式的理论基础上,进一步分析一个实际的Hive ORC表中的数据存储形式. 一.表结构 库名+表名:fileformat.test_orc 字段 类型 category_ ...