JAVA + uploadify 3.2.1 + Spring MVC + FTP 上传图片

最近在项目中遇到一个上传图片到其他服务器上,在上传的过程中要显示图片,并且页面要局部刷新；最为一个新手来说确实不容易，查找很多资料最终还是解决了。根据自己的理解来写点总结：

运用知识：SpringMVC + uploadify 3.2.1 + FTP + jquery

Uploadify 部分：（如果对uploadify不清楚的同学可以看下官网，或者博客，网上有很多很好的例子和资料。官网地址:http://www.uploadify.com）

首先到官网上下载uploadify所用到的 JS、CSS、swf 引用。

  下载地址：http://www.uploadify.com/download/

下载解压之后右下图：

红色标记部分使我们需要的文件。

1. 页面部分

jsp页面头部：

<script type="text/javascript" src="/resources/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="/resources/uploadify/uploadify.css" />
<script type="text/javascript" src="/resources/js/jquery-1.8.2.min.js"></script>

这些文件要放入工程相应位置：

jsp页面中 JS 代码：

$(document).ready(function(){
			// 图片上传
			$('#file_upload').uploadify({
			    'swf' : '/resources/misc/uploadify.swf?var='+(new Date()).getTime(),
			    'uploader' : '/userManager/uploadify;jsessionid=' + $("#jsession").val(),
			    'buttonText':'浏览',
			    'buttonClass':'btn',
			    'height': '20',
			    'width': '35',
			    'method':'post',
			    'multi': false,
			    'fileObjName':'file',
			    'fileTypeExts' : '*.jpg; *.jpeg; *.png; *.gif',
			    'fileSizeLimit' : '500KB',//上传文件允许的最大值,当不写单位,只写数字时,默认为KB
			    'onUploadSuccess' : function(file,data,response){
			    	var obj = eval('('+data+')');
			    	if(response){
			    		var img_url = obj.img_url;
				    	$("#uploadImg img").attr("src",img_url);
			    		$("#uploadImg").show();
			   			
			    		//赋值
			    		var img_name = obj.img_name;
			    		$("#ftpImgName").val(img_name);
			    		
			    		var imageSize = obj.imageSize;
			    		$("#imageSize").val(imageSize);
			    	}
			    },
			    'onInit': function () { //载入时触发, 作用取消进度条 .
		              $("#file_upload-queue").hide();
		            },
			    'onSelect' : function(file){
			    	var name = file.name;
			    	$("#imgName").val(name); //显示文件名字 
			    }
			});
});

JS代码是uploadify的核心，现在重点解释一下：

'swf' ：参数是引用uploadify的路径, 后面跟的时间参数是为了解决一些浏览器兼容的问题；

'uploader'：参数是请求进入后台Controller的路径；后面跟的参数 jsession 主要是为了解决再上传过程中出 现的302问题；详细解答：http://blog.youkuaiyun.com/chunqiuwei/article/details/23464803

 'buttonText': 参数 是指按钮上的汉字。

 'buttonClass':参数 是指按钮样式

 'height'：按钮的高度。（不写默认30PX）

 'width' : 按钮的宽度。（不写默认120PX）这里需要指出的是：按钮宽度和高度参数的值，必须是数字,后 面不能跟PX；

'method': 请求方法。

'multi'：参数值为true时，表示支持批量上传。

'fileObjName':参数表示 接受文件名称。

'fileTypeExts'：上传文件类型。

'fileSizeLimit'：上传文件大小。这里需要说明：当我们设置了'fileTypeExts'的值时，上传类型uploadify会自 动帮我们过滤，也就是所，当点击浏览时，只会出现我们与之匹配的文件类型。不写的话话默认为所有类型都可 以上传（*.*）; 当我们设置了'fileSzieLimit'这个参数的值时，上传文件大小也不需要我们关系，当选择上传文件大 小超 过设定的值，插件会自动弹出如下图：

一大串英文,不是我们想要的，这是我的解决方法是修改其原有的JS 代码, 改成自己需要的弹窗提示，如下图：

这样问题解决了，在前台页面uploadify就能帮我们处理，不需要我们在后台获取进行判断；

'onUploadSuccess' : 函数，当文件上传完成并且成功时,所执行的函数；

在uploadify插件中海油很多参数和函数，如果想要了解的更多可以参看官方文档：

http://www.uploadify.com/documentation/

2. Controller 部分

代码如下：

@RequestMapping(value="uploadify",method=RequestMethod.POST)
	@ResponseBody
	public String uploadifyImg(HttpServletRequest request, HttpServletResponse response){
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		MultipartFile file = multipartRequest.getFile("file");//获取文件对象
		JSONObject json = new JSONObject();
		try {
			if(file != null){
				 Dimension dimension = Imaging.getImageSize(file.getBytes());
	             int width = (int) dimension.getWidth() ;
	             int height = (int) dimension.getHeight();
	             String imageSize = width + "x" + height;
                 
                 json.put("imageSize", imageSize);
				
				String originalFilename = file.getOriginalFilename(); //文件名称
				String suffix = originalFilename.indexOf(".") != -1 ? originalFilename.substring(
						originalFilename.lastIndexOf("."), originalFilename.length()) : "";
				//图片存放的临时目录
				String tempDir = request.getSession().getServletContext().getRealPath("/") + UPLOAD_FILE_PATH;
				File dir = new File(tempDir);//判断目录是否存在
		        if (!dir.exists()) {
		            dir.mkdirs();
		        }
		        //uuid + .jpg 组成上传FTP文件名
		        String uuid = UUID.randomUUID().toString().replaceAll("\\-", "");
				String img_name = new StringBuffer(uuid).append(suffix).toString();
				
				json.put("img_name", img_name);
				
				String imgPath = new StringBuffer(tempDir).append(img_name).toString();//文件上传的临时目录
				
				file.transferTo(new File(imgPath));//把文件放入临时目录
				
				String img_url = new StringBuffer(UPLOAD_FILE_PATH).append(img_name).toString();//前台展示未见的路径
				
				json.put("img_url",img_url);
				
			}
		} catch (Exception e) {
			e.printStackTrace();
		} 
		return json.toString();
	}

这样返回前台,页面就可以再不刷新的情况下把图片上传到本地根目录下的upload目录中，并且名字也用了UUID做了处理，不会出现乱码；

本地根目录下有了图片，接下来就是在用户点击上传按钮时，把本地图片上传到FTP上面并且删除本地的图片；

上传FTP这段代码就不写了，主要讲讲uploadify上传图片页面无刷新，本地目录有了图片那么接下来就简单了。

博客写的不多，技术有限，如有问题可以留言也可以 加QQ 3077802130 互相交流学习，新申请的QQ专门为了技术交流。