Springmvc+uploadify实现文件带进度条批量上传

网上看了很多关于文件上传的帖子，众口不一，感觉有点乱，最近正好公司的项目里用到JQuery的uploadify控件做文件上传，所以整理下头绪，搞篇文档出来，供亲们分享。

Uploadify控件的主要优势是可以实现批量文件上传，并且提供了onSelect（选中文件）、onUploadSuccess（上传成功回调函数）等多个事件监听函数，可以操控上传的整个流程。

对uploadify有个简单的了解后，废话不多说，开始吧...

(由于这次项目中用到的是ssm框架，所以就以springmvc的后台处理为例)。

一、在工程中导入uploadify

1、首先，下载uploadify包文件

Uploadify官网 ：下载地址  <a>http://www.uploadify.com/</a>

2、解压包文件，得到如下结构：

background.jpg   是上传框的背景图片

jquery.uploadify.min.js   迷你版的uploadify js文件，主要功能就靠它了

jquery-1.9.1.js   都懂得，版本没啥要求

uploadify.css    上传组件的美化文件

uploadify.swf    上传时的动态效果，进度条等

Uploadify-cancel.png   取消上传按钮图片

3、将uplodify文件夹放到webapp下

4、导入必须的jar包

commons-fileupload-1.3.1.jar

commons-io-2.2.jar

使用maven时pom.xml中添加如下依赖即可：

Java代码  

1. <dependency>
2. <groupId>commons-fileupload</groupId>
3. <artifactId>commons-fileupload</artifactId>
4. <version>1.3.1</version>
5. </dependency>

5、在springmvc.xml文件中加入multipart 的解析器

Java代码  

1. <bean
2. id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
3. <property name="maxUploadSize" value="1024000"></property>
4. <property name="defaultEncoding" value="utf-8"/><!--属性：编码-->
5. </bean>

：这个必须配置，一会在controller里抓取上传文件时要用。否则会报错。

二、在需要做上传的页面中配置

6、在页头导入

7、在页面中需要上传附件的位置插入

Java代码  

1. <div id="uploadfileQueue"></div> //存放选择文件的 图片按钮的 Div
2. <input type="file" id="file_upload">
3. <input type="button" value="上传"
4. onclick="javascript:$('#file_upload').uplodify('upload','*')" >
5. <input type="button" value="取消上传"
6. onclick="javascript:$('#file_upload').uplodify('cancel','*')" >
7. （固定写法）

8、js中设置

代码  

1. <script type="text/javascript">
2. $(document).ready(function() {
3. $("#file_upload").uploadify({
4. //是否自动上传 true or false
5. 'auto':false,
6. //超时时间上传成功后，将等待服务器的响应时间。
7. //在此时间后，若服务器未响应，则默认为成功(因为已经上传,等待服务器的响应) 单位：秒
8. 'successTimeout':99999,
9. //附带值 JSON对象数据，将与每个文件一起发送至服务器端。
10. //如果为动态值，请在onUploadStart()中使用settings()方法更改该JSON值
11. 'formData':{       //可以不写
12. 'user.username':'',
13. 'user.age':''
14. },
15. 'onUploadStart': function(file) {
16. var name=$('#username').val();
17. var age=$('#age').val();
18. $("#file_upload").uploadify(
19. "settings",
20. "formData",
21. {'user.username':name,'user.age':age});
22. },
23. //flash
24. 'swf': "${pageContext.request.contextPath}/uplodify/uploadify.swf",
25. //文件选择后的容器div的id值
26. 'queueID':'uploadfileQueue',
27. //将要上传的文件对象的名称 必须与后台controller中抓取的文件名保持一致
28. 'fileObjName':'pic',
29. //上传地址
30. 'uploader':'${pageContext.request.contextPath}/upload/uploadFile',
31. //浏览将要上传文件按钮的背景图片路径
32. 'buttonImage':'${pageContext.request.contextPath}/uplodify/background.jpg',
33. //浏览按钮的宽度
34. 'width':'100',
35. //浏览按钮的高度
36. 'height':'32',
37. //在浏览窗口底部的文件类型下拉菜单中显示的文本
38. 'fileTypeDesc':'支持的格式：',
39. //允许上传的文件后缀
40. 'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', 有哪些？？
41. /*上传文件的大小限制允许上传文件的最大 大小。 这个值可以是一个数字或字 符串。
42. 如果它是一个字符串，它接受一个单位(B, KB, MB, or GB)。
43. 默认单位为KB您可以将此值设置为0 ，没有限制,
44. 单个文件不允许超过所设置的值 如果超过 onSelectError时间被触发*/
45. 'fileSizeLimit':'100KB',
46. //允许上传的文件的最大数量。当达到或超过这个数字，onSelectError事件被触发。
47. 'queueSizeLimit' : 3,
48. //选择上传文件后调用
49. 'onSelect' : function(file) {
50. //alert("123");
51. },
52. //返回一个错误，选择文件的时候触发
53. 'onSelectError':function(file, errorCode, errorMsg){
54. switch(errorCode) {
55. case -100:
56. alert("上传的文件数量已经超出系统限制的"
57. +$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
58. break;
59. case -110:
60. alert("文件 ["+file.name+"] 大小超出系统限制的"
61. +$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
62. break;
63. case -120:
64. alert("文件 ["+file.name+"] 大小异常！");
65. break;
66. case -130:
67. alert("文件 ["+file.name+"] 类型不正确！");
68. break;
69. }
70. },
71. //上传到服务器，服务器返回相应信息到data里
72. 'onUploadSuccess':function(file, data, response){
73. alert("上传成功");
74. },
75. //当单个文件上传出错时触发
76. 'onUploadError': function (file, errorCode, errorMsg, errorString) {
77. alert("上传失败");
78. }
79. });
80. });
81. </script>

9、在controller中，实现上传

Java代码  

1. //接收上传文件
2. @RequestMapping(value="uploadFile",method=RequestMethod.POST,produces="text/html;charset=utf-8")
3. @ResponseBody
4. public String uploadFile(@RequestParam("pic")CommonsMultipartFile pic,HttpServletRequest req,HttpServletResponse response) throws IOException{
5. //设置文件保存的本地路径
6. String filePath = req.getSession().getServletContext().getRealPath("/uploadFiles/");
7. String fileName = pic.getOriginalFilename();
8. String fileType = fileName.split("[.]")[1];
9. //为了避免文件名重复，在文件名前加UUID
10. String uuid = UUID.randomUUID().toString().replace("-","");
11. String uuidFileName = uuid + fileName;
12. File f = new File(filePath+"/"+uuid+"."+fileType);
13. //将文件保存到服务器
14. FileUtil.upFile(pic.getInputStream(), uuidFileName, filePath);
15. return uuidFileName;
16. }

这个过程中要用到FileUtil工具类：

Java代码  

1. package com.baidu.util;
2. import java.io.BufferedInputStream;
3. import java.io.BufferedOutputStream;
4. import java.io.File;
5. import java.io.FileInputStream;
6. import java.io.FileOutputStream;
7. import java.io.IOException;
8. import java.io.InputStream;
9. import java.io.OutputStream;
10. import java.util.List;
11. import java.util.zip.ZipEntry;
12. import java.util.zip.ZipOutputStream;
13. import javax.servlet.http.HttpServletRequest;
14. import javax.servlet.http.HttpServletResponse;
15. public class FileUtil {
16. /**
17. * 单个文件上传
18. * @param is
19. * @param fileName
20. * @param filePath
21. */
22. public static void upFile(InputStream is,String fileName,String filePath){
23. FileOutputStream fos = null;
24. BufferedOutputStream bos = null;
25. BufferedInputStream bis = null;
26. File file = new File(filePath);
27. if(!file.exists()){
28. file.mkdirs();
29. }
30. File f = new File(filePath+"/"+fileName);
31. try {
32. bis = new BufferedInputStream(is);
33. fos = new FileOutputStream(f);
34. bos = new BufferedOutputStream(fos);
35. byte[] bt = new byte[4096];
36. int len;
37. while((len = bis.read(bt))>0){
38. bos.write(bt, 0, len);
39. }
40. } catch (Exception e) {
41. e.printStackTrace();
42. }finally {
43. try {
44. if(null != bos){
45. bos.close();
46. bos = null;}
47. if(null != fos){
48. fos.close();
49. fos= null;
50. }
51. if(null != is){
52. is.close();
53. is=null;
54. }
55. if (null != bis) {
56. bis.close();
57. bis = null;
58. }
59. } catch (Exception e) {
60. e.printStackTrace();
61. }
62. }
63. }
64. }

10、效果图

三、总结

1、多文件的上传其实是多次调用单文件上传的方法，我们看到的批量上传其实是分步执行的，上传一次调用一次单文件上传的方法，不要被假象迷惑。

2、上传成功后可以返回文件的信息，在onUploadSuccess函数中可以获取到，这样就可以在页面上设置一个隐藏域存放返回来的值，比如说文件的id，多文件的话可以在隐藏域中抓取数组。然后随表单提交，更新表数据，这样就能方便的把上传文件的信息添加到数据库表中。下载地址

3、有的朋友问，上传的东西在服务器中，项目重启就会丢失，怎么办，其实这个在真实项目中会做专门处理，不需要考虑。