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时间比较，获取n天后（前）的日期

    <html> <head> <meta http-equiv="Content-Type" content="textml; charset ...

  2. 一个成功的 Git 分支模型（适用于商业应用开发）

    在这篇文章中,我将推广一下大约一年前我介绍过的一些项目(公私皆有)中使用的开发模型,它们的结果都非常成功.有段时间我非常想写出来分享一下,但是我至今才抽出时间来.我不会言及任何项目细节,仅讨论分支策略 ...

  3. Uncaught (in promise) TypeError:的错误

    1.错误 创建一个vue实例,在data定义一些变量,如activityTime. 在methods里面用了axios发送请求. 在then的回调里使用this.activityTime 报错! 2. ...

  4. 基于PHP的快递查询免费开放平台案例-快宝开放平台

    快递查询是快递业务中极其重要的业务,免费的快递查询开放平台:快宝开放平台. 快宝开放平台:http://open.kuaidihelp.com/home,已经对接100多家快递公司,实现快递物流信息实 ...

  5. Sprk SQL

    一.Spark SQL概述  1.Spark SQL的前生今世 Shark是一个为Spark设计的大规模数据仓库系统,它与Hive兼容.Shark建立在Hive的代码基础上,并通过将Hive的部分物理 ...

  6. 02_Action

    1.action VS Action action:代表一个Struts2的请求 Action:能够处理action请求的类 属性名必须与JavaBeans属性名相同 属性的类型可以是任意类型,从字符 ...

  7. 如何处理IO

    Network I/O operations in user code should only be done through the Nginx Lua API calls as the Nginx ...

  8. 搜索引擎solr和elasticsearch

    刚开始接触搜索引擎,网上收集了一些资料,在这里整理了一下分享给大家. 一.关于搜索引擎 搜索引擎(Search Engine)是指根据一定的策略.运用特定的计算机程序从互联网上搜集信息,在对信息进行组 ...

  9. Lua语言模型 与 Redis应用

    Lua语言模型 与 Redis应用 标签: Java与NoSQL 从 2.6版本 起, Redis 开始支持 Lua 脚本 让开发者自己扩展 Redis. 本篇博客主要介绍了 Lua 语言不一样的设计 ...

  10. Android线性布局

    线性布局 LinearLayout 是一个视图组,用于使所有子视图在单个方向(垂直或水平)保持对齐. 您可以使用 android:orientation 属性指定布局方向. LinearLayout ...