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中設置

代碼  

1. <script type="text/javascript">  
2.   
3. $(document).ready(function() {  
4.   
5.     $("#file_upload").uploadify({  
6.   
7.         //是否自動上傳 true or false  
8.         'auto':false,  
9.   
10.         //超時時間上傳成功后，將等待服務器的響應時間。  
11.         //在此時間后，若服務器未響應，則默認為成功(因為已經上傳,等待服務器的響應) 單位：秒  
12.         'successTimeout':99999,  
13.   
14.         //附帶值 JSON對象數據，將與每個文件一起發送至服務器端。  
15.         //如果為動態值，請在onUploadStart()中使用settings()方法更改該JSON值  
16.        'formData':{       //可以不寫  
17.            'user.username':'',  
18.            'user.age':''  
19.            },    
20.             'onUploadStart': function(file) {   
21.                 var name=$('#username').val();  
22.                 var age=$('#age').val();  
23.                 $("#file_upload").uploadify(  
24.                 "settings",   
25.                 "formData",   
26.                 {'user.username':name,'user.age':age});  
27.                 },   
28.         //flash  
29.         'swf': "${pageContext.request.contextPath}/uplodify/uploadify.swf",  
30.   
31.          //文件選擇后的容器div的id值   
32.         'queueID':'uploadfileQueue',  
33.   
34.          //將要上傳的文件對象的名稱 必須與后台controller中抓取的文件名保持一致      
35.         'fileObjName':'pic',  
36.   
37.         //上傳地址  
38.        'uploader':'${pageContext.request.contextPath}/upload/uploadFile',  
39.   
40.         //瀏覽將要上傳文件按鈕的背景圖片路徑  
41.         'buttonImage':'${pageContext.request.contextPath}/uplodify/background.jpg',  
42.   
43.         //瀏覽按鈕的寬度  
44.         'width':'100',  
45.   
46.         //瀏覽按鈕的高度  
47.         'height':'32',  
48.   
49.         //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本  
50.         'fileTypeDesc':'支持的格式：',  
51.   
52.         //允許上傳的文件后綴  
53.         'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', 有哪些？？  
54.   
55.         /*上傳文件的大小限制允許上傳文件的最大 大小。 這個值可以是一個數字或字 符串。 
56.           如果它是一個字符串，它接受一個單位(B, KB, MB, or GB)。 
57.           默認單位為KB您可以將此值設置為0 ，沒有限制,  
58.           單個文件不允許超過所設置的值 如果超過 onSelectError時間被觸發*/  
59.         'fileSizeLimit':'100KB',  
60.   
61.         //允許上傳的文件的最大數量。當達到或超過這個數字，onSelectError事件被觸發。  
62.         'queueSizeLimit' : 3,  
63.   
64.         //選擇上傳文件后調用  
65.         'onSelect' : function(file) {  
66.               //alert("123");      
67.         },  
68.   
69.         //返回一個錯誤，選擇文件的時候觸發  
70.         'onSelectError':function(file, errorCode, errorMsg){  
71.             switch(errorCode) {  
72.                 case -100:  
73.                     alert("上傳的文件數量已經超出系統限制的"  
74.                      +$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件！");  
75.                     break;  
76.   
77.                 case -110:  
78.                     alert("文件 ["+file.name+"] 大小超出系統限制的"  
79.                      +$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");  
80.                     break;  
81.   
82.                 case -120:  
83.                     alert("文件 ["+file.name+"] 大小異常！");  
84.                     break;  
85.   
86.                 case -130:  
87.                     alert("文件 ["+file.name+"] 類型不正確！");  
88.                     break;  
89.             }  
90.         },  
91.   
92.         //上傳到服務器，服務器返回相應信息到data里  
93.         'onUploadSuccess':function(file, data, response){  
94.             alert("上傳成功");  
95.         },  
96.   
97.       //當單個文件上傳出錯時觸發  
98.         'onUploadError': function (file, errorCode, errorMsg, errorString) {   
99.             alert("上傳失敗");  
100.             }   
101.     });  
102.   
103. });  
104.   
105. </script>  

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、有的朋友問，上傳的東西在服務器中，項目重啟就會丟失，怎么辦，其實這個在真實項目中會做專門處理，不需要考慮。