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. Go 实现字符串相似度计算函数 Levenshtein 和 SimilarText

    [转]http://www.syyong.com/Go/Go-implements-the-string-similarity-calculation-function-Levenshtein-and ...

  2. js前端模块化（一） commonjs

    随着浏览器的发展,很多页面逻辑迁移到了客户端(表单验证等),JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组 ...

  3. Mobx使用详解

    Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. 本教程旨在介绍其用法及概念,并重点介绍其与Reac ...

  4. redis的数据持久化方案

    Redis的持久化方案有两种 1.Rdb方式:快照形式,定期将内存中的数据持久化到硬盘.是Redis默认的数据持久化的形式. Rdb:缺点是:数据还没有更新到磁盘上,突然断电,造成数据的不完整性. 在 ...

  5. ubuntu安装fat32和exfat文件系统支持

    vftp(fat32) apt install -y dosfstools exfat apt install -y exfat-fuse exfat-utils

  6. Swift基础之实现选择图片时，出现类似于ActionSheet的样式

    之前看到过有APP在选择图片时,调用手机相册时,将手机相册做成了左右滑动选择的效果,这次展示的就是这种样式,用OC语言已经有人实现过类似的代码,在这里写的仅仅是效果展示的代码调用,具体代码,可以自己研 ...

  7. Racket 模拟SICP的流(延时计算)

    默认的Racket是要对函数参数进行求值的, 例如(f 1 (+ 1 2))里面,(+ 1 2)要先求值为3,变为(f 1 3)再进行下一步操作.因此, Racket若按照SICP使用define关键 ...

  8. Apache shiro集群实现 （七）分布式集群系统下---cache共享

    Apache shiro集群实现 (一) shiro入门介绍 Apache shiro集群实现 (二) shiro 的INI配置 Apache shiro集群实现 (三)shiro身份认证(Shiro ...

  9. Dynamics CRM2016 Web API之Expand related entities & $ref & $count

    本篇介绍两个关于1:N关系中通过主实体取关联子实体的api,这两个api会经常被用到而且比原来的odata方式更加方便,之前如果我们要取主实体下所有的关联实体的记录都是通过Retrieve Multi ...

  10. ORACLE EBS 表空间控制

    --1G=1024MB --1M=1024KB --1K=1024Bytes --1M=11048576Bytes --1G=1024*11048576Bytes=11313741824Bytes S ...