jQuery 异步上传插件 Uploadify302 使用 （JavaEE Spring MVC）
赫连彬炳
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> 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 密码：gcw4jar : 链接：http://pan.baidu.com/s/1AmNgU 密码：8qn9
手册：链接：http://pan.baidu.com/s/1pJBikCr 密码：or37
类似资料：