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.   
3. id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
4.   
5. <property name="maxUploadSize" value="1024000"></property>  
6.   
7. <property name="defaultEncoding" value="utf-8"/><!--属性：编码-->  
8.   
9. </bean>  

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

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

6、在页头导入

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

Java代码  

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

8、js中设置

代码  

9、在controller中，实现上传

Java代码  

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

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

Java代码  

1. package com.baidu.util;  
2.   
3.    
4.   
5. import java.io.BufferedInputStream;  
6.   
7. import java.io.BufferedOutputStream;  
8.   
9. import java.io.File;  
10.   
11. import java.io.FileInputStream;  
12.   
13. import java.io.FileOutputStream;  
14.   
15. import java.io.IOException;  
16.   
17. import java.io.InputStream;  
18.   
19. import java.io.OutputStream;  
20.   
21. import java.util.List;  
22.   
23. import java.util.zip.ZipEntry;  
24.   
25. import java.util.zip.ZipOutputStream;  
26.   
27.    
28.   
29. import javax.servlet.http.HttpServletRequest;  
30.   
31. import javax.servlet.http.HttpServletResponse;  
32.   
33.    
34.   
35. public class FileUtil {  
36.   
37. /** 
38.  
39.  * 单个文件上传 
40.  
41.  * @param is 
42.  
43.  * @param fileName 
44.  
45.  * @param filePath 
46.  
47.  */  
48.   
49. public static void upFile(InputStream is,String fileName,String filePath){  
50.   
51. FileOutputStream fos = null;  
52.   
53. BufferedOutputStream bos = null;  
54.   
55. BufferedInputStream bis = null;  
56.   
57. File file = new File(filePath);  
58.   
59. if(!file.exists()){  
60.   
61. file.mkdirs();  
62.   
63. }  
64.   
65. File f = new File(filePath+"/"+fileName);  
66.   
67. try {  
68.   
69. bis = new BufferedInputStream(is);  
70.   
71. fos = new FileOutputStream(f);  
72.   
73. bos = new BufferedOutputStream(fos);  
74.   
75. byte[] bt = new byte[4096];  
76.   
77. int len;  
78.   
79. while((len = bis.read(bt))>0){  
80.   
81. bos.write(bt, 0, len);  
82.   
83. }  
84.   
85. } catch (Exception e) {  
86.   
87. e.printStackTrace();  
88.   
89. }finally {  
90.   
91. try {  
92.   
93. if(null != bos){  
94.   
95. bos.close();  
96.   
97. bos = null;}  
98.   
99. if(null != fos){  
100.   
101. fos.close();  
102.   
103. fos= null;  
104.   
105. }  
106.   
107. if(null != is){  
108.   
109. is.close();  
110.   
111. is=null;  
112.   
113. }  
114.   
115. if (null != bis) {  
116.   
117. bis.close();  
118.   
119. bis = null;  
120.   
121. }  
122.   
123. } catch (Exception e) {  
124.   
125. e.printStackTrace();  
126.   
127. }  
128.   
129. }  
130.   
131. }  
132.   
133. }  

10、效果图

三、总结

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

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

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

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

标签：

原文地址：http://www.cnblogs.com/gushens/p/5032323.html