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. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  2. weblogic AND jboss 反序列化漏洞

    C:\Program Files\Java\jboss-4.2.3.GA\server\default\deploy\http-invoker.sar\invoker.war\WEB-INF serv ...

  3. ABP文档笔记 - 事件BUS

    文档: ABP框架 - 领域事件(EventBus) EventBus & Domain Events ABP源码分析二十五:EventBus EventBus(事件总线) EventBus是 ...

  4. Python笔记十一（迭代器）

    这里我们要学会Iterable和Iterator. 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的generator f ...

  5. 最优秀的网络框架retrofit

    由于某学员要求所以我打算写一篇 标题先记录下来 我会在一周内完成此篇文章

  6. Errors occurred during the build. Errors running builder 'JavaScript Validator' on project '项目名'.

    把JavaScript Validator去掉.去掉的方法是:选择一个项目--右键Properties--Builders(排第二)--点一下右侧会有四项--取消第一项"JavaScript ...

  7. Objective-C点语法

    Objective-C点语法 点语法可以简单的理解成是为了让Java等语言的开发人员能够快速适应OC语言而添加的一个新写法 因为Java里没有指针,也没有[xxx xxx]这种调用方式,都是使用点xx ...

  8. Ruby 连接MySQL数据库

    使用Ruby连接数据库的过程还真的是坎坷,于是写点文字记录一下. 简介 Ruby简介 RubyGems简介 包管理之道 比较著名的包管理举例 细说gem 常用的命令 准备 驱动下载 dbi mysql ...

  9. Scheme call/cc 研究

    目前尚不清楚实质,但已经能够从形式上理解它的某些好处,有个很简单的连乘函数可以说明: 为了展示究竟发生了什么,我包装了下乘法函数,将其变为mul. 我们将比较product和xproduct的区别. ...

  10. Java基础之枚举妙用

    对于枚举,初学Java的时候可能我们就已经接触过了,但是在毕业前,其实一直都不知道真正工作里面枚举是怎么用的,枚举有什么用?接下来,博主就介绍枚举在实际工作中的一种使用场景,本文只适合初级的小菜鸟看哈 ...