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.csdn.net/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)@ResponseBodypublic 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专门为了技术交流。