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. numpy.squeeze()是干啥的

    例子: a = 3 print np.squeeze(a) # 输出3 a = [3] print np.squeeze(a) # 输出3 a = [[3]] print np.squeeze(a) ...

  2. hive 存储，解析，处理json数据

    hive 处理json数据总体来说有两个方向的路走 1.将json以字符串的方式整个入Hive表,然后通过使用UDF函数解析已经导入到hive中的数据,比如使用LATERAL VIEW json_tu ...

  3. python socket网络编程之粘包问题详解

    一,粘包问题详情 1,只有TCP有粘包现象,UDP永远不会粘包 你的程序实际上无权直接操作网卡的,你操作网卡都是通过操作系统给用户程序暴露出来的接口,那每次你的程序要给远程发数据时,其实是先把数据从用 ...

  4. Python中什么是变量Python中定义字符串

    在Python中,变量的概念基本上和初中代数的方程变量是一致的. 例如,对于方程式 y=x*x ,x就是变量.当x=2时,计算结果是,当x=5时,计算结果是25. 只是在计算机程序中,变量不仅可以是数 ...

  5. MongoDB 查询文档

    语法 MongoDB 查询数据的语法格式如下: >db.COLLECTION_NAME.find() find() 方法以非结构化的方式来显示所有文档. 如果你需要以易读的方式来读取数据,可以使 ...

  6. 制定一个apk路径 然后跳出安装界面

    制定一个apk的路径 然后跳出界面让用户选择是否安装 我们系统有一个写好的Activity来协助我们完成这一功能 我们来看看它的清单文件 <?xml version="1.0" ...

  7. 【Android】给Android Studio设置代理

    先打开我们的Android Studio,点击工具栏的file下的settings,如下图 之后再搜索框上面输入Proxy,然后按第四步提示点击,如下图 之后就进入了设置代理的界面了,如下图 默认情况 ...

  8. Python Generator 运行细节验证

    今天来__next__和send, 改天来throw和close class A: def __setattr__(self, key, val): print('set %s to %s'%(key ...

  9. SQLite 分离数据库(http://www.w3cschool.cc/sqlite/sqlite-detach-database.html)

    SQLite 分离数据库 SQLite的 DETACH DTABASE 语句是用来把命名数据库从一个数据库连接分离和游离出来,连接是之前使用 ATTACH 语句附加的.如果同一个数据库文件已经被附加上 ...

  10. Ant简介

    Ant,apache开源项目,基于Java的构建工具,是一个小程序.它通过自动完成所有的编译代码,运行测试以及 打包重新部署等繁琐费力的任务来帮助软件团队开发大程序: Ant的目标是自动完成所有的构建 ...