WEB文件上傳之apache common upload使用(一)

  •  

  文件上傳一個常常用到的功能,它有許多中實現的方案。javascript

頁面表單 + RFC1897規範 + http協議上傳html

頁面控件(flash/html5/activeX/applet) + RFC1897規範 + http協議上傳html5

頁面控件(flash/html5/activeX/applet) + 自定義數據規範 + http協議上傳java

頁面控件(flash/html5/activeX/applet) + FTP協議上傳jquery

頁面控件(flash/html5/activeX/applet) + 自定義協議apache

 

  用apache common upload組件實際就是採用的「頁面表單 + RFC1897規範 + http協議上傳」實現方式,須要實現的技術點:瀏覽器

1. 多文件數據的提交服務器

2. 文件數據包接收存儲功能session

3. 文件數據上傳進度app

4. WEB頁面無刷新異步提交

 

 時序圖:

  • 文件上傳時序圖


  • 文件上傳進度獲取時序圖
實現思路:

1. 多文件數據的提交

在WEB頁面採用多個<input type="file">利用form表單進行文件提交

 

2. 文件數據包接收存儲功能

服務端採用servlet,利用apache common upload組件接收解析數據包,接收解析的過程當中保存進度到session, 文件接收完畢後保存到指定目錄

 

3. 文件數據上傳進度

在WEB頁面在界面寫一個定時器,定時訪問服務器提供上傳進度獲取功能的servlet,獲取文件上傳進度信息

 

4. WEB頁面無刷新異步提交

利用iframe來實現WEB頁面無刷新異步上傳

 

關鍵代碼:

UploadFileServlet.java

Java代碼   收藏代碼
  1. package com.test.servlet;  
  2.   
  3. import java.io.File;  
  4. import java.io.IOException;  
  5. import java.io.Writer;  
  6. import java.util.Iterator;  
  7. import java.util.List;  
  8.   
  9. import javax.servlet.ServletException;  
  10. import javax.servlet.http.HttpServlet;  
  11. import javax.servlet.http.HttpServletRequest;  
  12. import javax.servlet.http.HttpServletResponse;  
  13.   
  14. import org.apache.commons.fileupload.FileItem;  
  15. import org.apache.commons.fileupload.FileUploadBase.FileSizeLimitExceededException;  
  16. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  17. import org.apache.commons.fileupload.servlet.FileCleanerCleanup;  
  18. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  19. import org.apache.commons.io.FileCleaningTracker;  
  20. import org.apache.commons.io.FileUtils;  
  21. import org.apache.commons.io.FilenameUtils;  
  22. import org.apache.commons.io.IOUtils;  
  23. import org.apache.commons.lang3.ArrayUtils;  
  24. import org.apache.commons.logging.Log;  
  25. import org.apache.commons.logging.LogFactory;  
  26.   
  27. /** 
  28.  * 文件上傳數據接收類 
  29.  *  
  30.  * @author chengqi 
  31.  * 
  32.  */  
  33. public class UploadFileServlet extends HttpServlet {  
  34.   
  35.     /** 日誌對象*/  
  36.     private Log logger = LogFactory.getLog(this.getClass());  
  37.   
  38.     private static final long serialVersionUID = 1L;  
  39.   
  40.     /** 上傳目錄名*/  
  41.     private static final String uploadFolderName = "uploadFiles";  
  42.   
  43.     /** 上傳臨時文件存儲目錄*/  
  44.     private static final String tempFolderName = "tempFiles";  
  45.   
  46.     /** 上傳文件最大爲30M*/   
  47.     private static final Long fileMaxSize = 30000000L;   
  48.   
  49.     /** 容許上傳的擴展名*/  
  50.     private static final String [] extensionPermit = {"txt", "xls", "zip"};  
  51.   
  52.     /** 統一的編碼格式*/  
  53.     private static final String encode = "UTF-8";  
  54.   
  55.     @Override  
  56.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  57.         logger.info("UploadFileServlet#doPost() start");  
  58.         try {  
  59.             String curProjectPath = this.getServletContext().getRealPath("/");  
  60.             String saveDirectoryPath = curProjectPath + "/" + uploadFolderName;  
  61.             String tempDirectoryPath = curProjectPath + "/" + tempFolderName;  
  62.             File saveDirectory = new File(saveDirectoryPath);  
  63.             File tempDirectory = new File(tempDirectoryPath);  
  64.             logger.debug("Project real path [" + saveDirectory.getAbsolutePath() + "]");  
  65.             //上傳時產生的臨時文件的默認保存目錄  
  66.             logger.debug("Temp files default save path [" + System.getProperty("java.io.tmpdir") + "]");  
  67.             DiskFileItemFactory factory = new DiskFileItemFactory();  
  68.             //DiskFileItemFactory中DEFAULT_SIZE_THRESHOLD=10240表示若是上傳文件大於10K則會產生上傳臨時文件  
  69.             //上傳臨時文件的默認目錄爲java.io.tmpdir中保存的路徑,根據操做系統的不一樣會有區別  
  70.               
  71.             if(!tempDirectory.exists()) {  
  72.                 tempDirectory.mkdir();  
  73.             }  
  74.             //從新設置臨時文件保存目錄  
  75.             factory.setRepository(tempDirectory);  
  76.   
  77.             //設置文件清除追蹤器,文件上傳過程當中產生的臨時文件會在  
  78.             FileCleaningTracker fileCleaningTracker = FileCleanerCleanup.getFileCleaningTracker(this.getServletContext());  
  79.             factory.setFileCleaningTracker(fileCleaningTracker);  
  80.   
  81.             ServletFileUpload upload = new ServletFileUpload(factory);  
  82.   
  83.             //設置文件上傳進度監聽器  
  84.             FileProcessListener processListener = new FileProcessListener(request.getSession());  
  85.             upload.setProgressListener(processListener);  
  86.   
  87.             // 設置文件上傳的大小限制  
  88.             upload.setFileSizeMax(fileMaxSize);  
  89.   
  90.             // 設置文件上傳的頭編碼,若是須要正確接收中文文件路徑或者文件名  
  91.             // 這裏須要設置對應的字符編碼,爲了通用這裏設置爲UTF-8  
  92.             upload.setHeaderEncoding(encode);  
  93.   
  94.             //解析請求數據包  
  95.             List<FileItem> fileItems = upload.parseRequest(request);  
  96.             //遍歷解析完成後的Form數據和上傳文件數據  
  97.             for (Iterator<FileItem> iterator = fileItems.iterator(); iterator.hasNext();) {  
  98.                 FileItem fileItem = iterator.next();  
  99.                 String fieldName = fileItem.getFieldName();  
  100.                 String name = fileItem.getName();  
  101.                 //若是爲上傳文件數據  
  102.                 if(!fileItem.isFormField()) {  
  103.                     logger.debug("fieldName[" + fieldName + "] fileName[" + name + "] ");  
  104.                     if(fileItem.getSize() > 0) {  
  105.                         String fileExtension = FilenameUtils.getExtension(name);  
  106.                         if(!ArrayUtils.contains(extensionPermit, fileExtension)) {  
  107.                             throw new NoSupportExtensionException("No Support extension.");  
  108.                         }  
  109.                         String fileName = FilenameUtils.getName(name);  
  110.                         FileUtils.copyInputStreamToFile(fileItem.getInputStream(),   
  111.                                 new File(saveDirectory, fileName));  
  112.                     }  
  113.                 } else { //Form表單數據  
  114.                     String value = fileItem.getString(encode);  
  115.                     logger.debug("fieldName[" + value + "] fieldValue[" + fieldName + "]");  
  116.                 }  
  117.             }  
  118.             responseMessage(response, State.OK);  
  119.         } catch(FileSizeLimitExceededException e) {   
  120.             logger.error(e.getMessage(), e);  
  121.             responseMessage(response, State.OVER_FILE_LIMIT);  
  122.         } catch(NoSupportExtensionException e) {   
  123.             logger.error(e.getMessage(), e);  
  124.             responseMessage(response, State.NO_SUPPORT_EXTENSION);  
  125.         } catch(Exception e) {  
  126.             logger.error(e.getMessage(), e);  
  127.             responseMessage(response, State.ERROR);  
  128.         } finally {  
  129.             //清除上傳進度信息  
  130.             request.getSession().removeAttribute("fileUploadProcess");  
  131.         }  
  132.         logger.info("UploadFileServlet#doPost() end");   
  133.     }  
  134.   
  135.     public enum State {  
  136.         OK(200, "上傳成功"),  
  137.         ERROR(500, "上傳失敗"),  
  138.         OVER_FILE_LIMIT(501, "超過上傳大小限制"),  
  139.         NO_SUPPORT_EXTENSION(502, "不支持的擴展名");  
  140.   
  141.         private int code;  
  142.         private String message;  
  143.         private State(int code, String message) {  
  144.             this.code = code;  
  145.             this.message = message;  
  146.         }  
  147.   
  148.         public int getCode() {  
  149.             return code;  
  150.         }  
  151.         public String getMessage() {  
  152.             return message;  
  153.         }  
  154.   
  155.     }  
  156.   
  157.     /** 
  158.      * 返回結果函數 
  159.      * @param response 
  160.      * @param state 
  161.      */  
  162.     private void responseMessage(HttpServletResponse response, State state) {  
  163.         response.setCharacterEncoding(encode);  
  164.         response.setContentType("text/html; charset=" + encode);  
  165.         Writer writer = null;  
  166.         try {  
  167.             writer = response.getWriter();  
  168.             writer.write("<script>");  
  169.             writer.write("window.parent.fileUploadCallBack({\"code\":" + state.getCode() +",\"message\":\"" + state.getMessage()+ "\"});");  
  170.             writer.write("</script>");  
  171.             writer.flush();  
  172.             writer.close();  
  173.         } catch(Exception e) {  
  174.             logger.error(e.getMessage(), e);  
  175.         } finally {  
  176.             IOUtils.closeQuietly(writer);  
  177.         }  
  178.     }  
  179.   
  180.   
  181. }  

  

 

GetFileProcessServlet.java

Java代碼   收藏代碼
  1. package com.test.servlet;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.Writer;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.   
  11. import org.apache.commons.io.IOUtils;  
  12. import org.apache.commons.logging.Log;  
  13. import org.apache.commons.logging.LogFactory;  
  14.   
  15. /** 
  16.  * 文件上傳進度獲取Servlet 
  17.  *  
  18.  * @author chengqi 
  19.  * 
  20.  */  
  21. public class GetFileProcessServlet extends HttpServlet {  
  22.   
  23.     /** 日誌對象*/  
  24.     private Log logger = LogFactory.getLog(this.getClass());  
  25.   
  26.     private static final long serialVersionUID = 1L;  
  27.   
  28.     @Override  
  29.     protected void doGet(HttpServletRequest request, HttpServletResponse response)  
  30.             throws ServletException, IOException {  
  31.         logger.info("GetFileProcessServlet#doGet start");  
  32.         String fileUploadPercent = (String)request.getSession().getAttribute("fileUploadProcess");  
  33.         Writer writer = null;  
  34.         try {  
  35.             writer = response.getWriter();  
  36.             logger.info("percent:" + fileUploadPercent);  
  37.             IOUtils.write(fileUploadPercent == null ? "0%" : fileUploadPercent, writer);  
  38.             writer.flush();  
  39.             writer.close();  
  40.         } catch(Exception e) {  
  41.             logger.error(e.getMessage(), e);  
  42.         } finally {  
  43.             IOUtils.closeQuietly(writer);  
  44.         }  
  45.         logger.info("GetFileProcessServlet#doGet end");  
  46.     }  
  47.   
  48. }  

 

FileProcessListener.java

Java代碼   收藏代碼
  1. package com.test.servlet;  
  2.   
  3. import java.text.NumberFormat;  
  4.   
  5. import javax.servlet.http.HttpSession;  
  6.   
  7. import org.apache.commons.fileupload.ProgressListener;  
  8. import org.apache.commons.logging.Log;  
  9. import org.apache.commons.logging.LogFactory;  
  10.   
  11. /** 
  12.  * 文件進度監聽器 
  13.  *  
  14.  * @author chengqi 
  15.  * 
  16.  */  
  17. public class FileProcessListener implements ProgressListener{  
  18.   
  19.     /** 日誌對象*/  
  20.     private Log logger = LogFactory.getLog(this.getClass());  
  21.   
  22.     private HttpSession session;  
  23.   
  24.     public FileProcessListener(HttpSession session) {  
  25.         this.session = session;    
  26.     }  
  27.       
  28.   
  29.     public void update(long pBytesRead, long pContentLength, int pItems) {  
  30.         double readByte = pBytesRead;  
  31.         double totalSize = pContentLength;  
  32.         if(pContentLength == -1) {  
  33.             logger.debug("item index[" + pItems + "] " + pBytesRead + " bytes have been read.");  
  34.         } else {  
  35.             logger.debug("item index[" + pItems + "] " + pBytesRead + " of " + pContentLength + " bytes have been read.");  
  36.             String p = NumberFormat.getPercentInstance().format(readByte / totalSize);  
  37.             session.setAttribute("fileUploadProcess", p);  
  38.         }  
  39.     }  
  40.   
  41. }  
 

 

apacheUploadDemo.html

 

Html代碼   收藏代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.     <title>Apache common實現基本文件上傳</title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.     <script type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>  
  7.     <script type="text/javascript" src="js/jquery/jquery.form.js"></script>  
  8.     <script type="text/javascript">  
  9.   
  10.     //定時器對象  
  11.     var uploadProcessTimer = null;  
  12.   
  13.     $(function (){  
  14.         //綁定定時器開始操做到提交按鈕  
  15.         $('input[type=submit]').click(function () {  
  16.             //啓動上傳進度查詢定時器  
  17.             uploadProcessTimer = window.setInterval(getFileUploadProcess, 20);  
  18.         })  
  19.     });  
  20.   
  21.     //獲取文件上傳進度  
  22.     function getFileUploadProcess() {  
  23.         $.get('/upload/getFileProcessServlet', function(data) {  
  24.             $('#fileUploadProcess').html(data);  
  25.         });  
  26.     }  
  27.   
  28.     //上傳完成後,由iframe返回腳本自動調用  
  29.     function fileUploadCallBack(res) {  
  30.         //清除定時器  
  31.         if(uploadProcessTimer) {  
  32.             window.clearInterval(uploadProcessTimer);  
  33.         }  
  34.         var message = res['message'];  
  35.         var code = res['code'];  
  36.         if(code != 200) {  
  37.             $('#fileUploadProcess').html('0%');  
  38.         }  
  39.         alert(message);  
  40.     }  
  41.   
  42.     </script>  
  43. </head>  
  44. <body>  
  45. <h2>上傳文件1</h2>  
  46.   
  47. 用戶信息:  <br/>  
  48. <form id="testForm" action="/upload/uploadServlet" method="post" enctype="multipart/form-data" target="iframeUpload">  
  49.     姓名:<input name="name" type="text"<br/>  
  50.     附件1:<input name="file1" type="file" <br/>  
  51.     附件2:<input name="file2" type="file" <br/>  
  52.     <br><br>  
  53.     <input type="submit" value="提交" ><br/>  
  54. </form>  
  55. 上傳進度:<label id="fileUploadProcess"></label>  
  56. <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0  SCROLLING="no" style="display:NONE"></iframe>     
  57. </body>  
  58. </html>  
 
總結:
雖然使用apache common upload組件實現了文件上傳,可是從上傳的效果來看,並非一個很完美的解決方案。
有以下缺點:
1. 當有多個文件上傳時,沒法知道單個文件的上傳進度,由於文件上傳消息中根本就沒有關於單個文件大小的信息
文件上傳消息
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=UTF-8
Transfer-Encoding: chunked
Date: Tue, 22 Apr 2014 07:45:45 GMT

POST /upload/uploadServlet HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/upload/apacheUploadDemo.html
Cookie: JSESSIONID=33498CE814284D67F957CA53D45F0174
Connection: keep-alive

Content-Length 2363
Content-Type multipart/form-data; boundary=---------------------------189163093917262

-----------------------------189163093917262
Content-Disposition: form-data; name="name" 

-----------------------------189163093917262
Content-Disposition: form-data; name="file1"; filename="New Text Document.txt" Content-Type: text/plain
文件數據

-----------------------------189163093917262
Content-Disposition: form-data; name="file2"; filename="New Text Document (2).txt" Content-Type: text/plain
文件數據

-----------------------------189163093917262--

  

 2. 瀏覽器必須將全部文件讀取完畢纔開始上傳,而且是一次性提交全部的數據文件,在互聯網環境下,會http鏈接超時,大文件沒法上傳成功。

 

3. 服務端判斷是否超過大小限制,是經過計算接收數據的累積字節數和限制大小比較,這種狀況下,若是限制大小是30M,那麼在服務端已經讀取了30M完成後纔會拋出異常,多餘的消耗的服務器的內存和硬盤空間

 

因此基於這些緣由,頁面表單 + RFC1897規範 + http協議上傳 + 後臺apache common upload組件接收的這種解決方案,不適合解決WEB頁面一次多文件上傳,大文件上傳狀況,比較適合一次單個小文件附件的狀況,如:博客附件,登記照片上傳,預覽等狀況。

 

Demo源碼見附件

相關文章
相關標籤/搜索