plupload上传插件在SpringMVC中的整合

1946人阅读 评论(3) 收藏 举报
分类:

前言:最近在给学院的网站做一个添加附件的功能,首先到了某某邮箱看了一下,简单实用,但是是flash做的,无法拷贝,就只好上网找插件了。经过筛选,终于找到plupload这款插件(事实上有的编辑器自带添加附件功能)。官网只有PHP版本,后来各种百度谷歌,找到的资料都用点小问题,拼搏一天终于实现了功能,下面就把遇到的问题和重点部分写出来,希望遇到同样问题的同学可以参考。

首先你需要下载plupload插件,下载地址:http://www.plupload.com/download/

JSP页面配置如下:

  1. <!-- 配置界面上的css -->  
  2. <link rel="stylesheet" type="text/css" href="<%=basePath%>plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css">  
  3. <script type="text/javascript" src="<%=basePath%>js/jquery-1.9.1.min.js"></script>  
  4. <script type="text/javascript" src="<%=basePath%>plupload/js/plupload.full.min.js"></script>  
  5. <script type="text/javascript" src="<%=basePath%>plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>  
  6.    
  7. <!-- 国际化中文支持 -->  
  8. <script type="text/javascript" src="<%=basePath%>plupload/js/i18n/zh_CN.js"></script>  
  9.   
  10. <script type="text/javascript">  
  11. // Initialize the widget when the DOM is ready   
  12. $(function() {       
  13.     // Setup html5 version       
  14.     function plupload(){  
  15.         $("#uploader").pluploadQueue({           
  16.             // General settings           
  17.             runtimes : 'flash,html5,gears,browserplus,silverlight,html4',           
  18.             url : "<%=basePath%>upload",    
  19.             //unique_names: true,  
  20.             chunk_size : '1mb',           
  21.             //rename : true,  
  22.             dragdrop: true,  
  23.             filters : {               
  24.                 // Maximum file size               
  25.                 max_file_size : '10mb',  
  26.                 // Specify what files to browse for  
  27.                 mime_types: [  
  28.                     {title : "Image files", extensions : "jpg,gif,png"},   
  29.                     {title : "Zip files", extensions : "zip"}  
  30.                 ]  
  31.             },             
  32.             // Resize images on clientside if we can           
  33.             resize: {               
  34.                 width : 200,                
  35.                 height : 200,                
  36.                 quality : 90,               
  37.                 crop: true   
  38.                 // crop to exact dimensions           
  39.             },             // Flash settings           
  40.             flash_swf_url : '<%=basePath%>plupload/js/Moxie.swf',                 
  41.             // Silverlight settings           
  42.             silverlight_xap_url : '<%=basePath%>plupload/js/Moxie.xap' ,     
  43.             // 参数  
  44.             multipart_params: {'user''Rocky''time''2012-06-12'}  
  45.       
  46.         });  
  47.     }  
  48.       
  49.     plupload();  
  50.       
  51.     $('#Reload').click(function(){  
  52.         plupload();  
  53.     });  
  54. });   
  55.       
  56. </script>   
  57.   
  58. <div style="width:750px; margin:0px auto;">  
  59.         <div id="uploader">  
  60.             <p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>  
  61.         </div>  
  62.         <input value="继续上传" id="Reload" type="button">  
  63. </div>  
JS部分配置说明可以参考:http://www.douban.com/note/188007146/ 和 http://www.aixueit.com/thread-304-1-1.html,详细配置请自行百度或者查阅官网http://www.plupload.com。界面如下:


重点的就是后台了,在写后台前不得不说明一下plupload的大概工作原理:如果上传列表中存在文件大小大于chunk_size但是小于max_file_size的文件,那么plupload会将其分解成最大大小为chunk_size的几个小块(这可以绕过服务器设置的限制最大上传文件大小,另外进度条也会显示的合理),然后再将文件中的各个文件(包括分解后的小块)依次上传,这里的上传并不是一次性全部传给服务器,而是当一个文件上传完成后,再上传第二个文件,这样也很好的做了进度条的显示。当然了,在后台代码中,如果遇到分块的文件,必须对其进行合并。

先附上之前找的部分资料吧,http://www.rockydo.com/articleDetail.php?id=83  感觉挺好的,不过我使用commons-fileupload-1.2.2.jar方式上传的时候获取不到值(能实现的同学欢迎告诉我),所以后来就只好换种方式了,于是就看到了这篇文章http://stackoverflow.com/questions/16813907/apache-commons-file-upload-with-spring-mvc-and-plupload,使用MultiparFile方式上传,代码剪短,但是给了我不小的启发。好了,开始写我的思路吧。

为了更清楚的表达结构,我决定将重点处理代码写入一个PluploadUtil工具类,在配上一个Plupload Bean类,这样在调用时就方便多了。具体代码如下:

  1. import java.io.BufferedOutputStream;  
  2. import java.io.File;  
  3. import java.io.FileOutputStream;  
  4. import java.io.IOException;  
  5. import java.io.InputStream;  
  6. import java.io.OutputStream;  
  7. import java.util.Iterator;  
  8. import java.util.List;  
  9.   
  10. import org.springframework.util.MultiValueMap;  
  11. import org.springframework.web.multipart.MultipartFile;  
  12. import org.springframework.web.multipart.MultipartHttpServletRequest;  
  13.   
  14. /** 
  15.  * Plupload是一个上传插件。 
  16.  * 上传原理为单个文件依次发送至服务器. 
  17.  * 上传打文件时可以将其碎片化上传。但是一般情况下,不会这样做, 
  18.  * 所以这里更多的是处理普通文件的批量上传。 
  19.  * 这里主要处理文件上传 
  20.  */  
  21. public class PluploadUtil {  
  22.     private static final int BUF_SIZE = 2 * 1024;  
  23.     /**上传失败响应的成功状态码*/  
  24.     public static final String RESP_SUCCESS = "{\"jsonrpc\" : \"2.0\", \"result\" : \"success\", \"id\" : \"id\"}";  
  25.     /**上传失败响应的失败状态码*/  
  26.     public static final String RESP_ERROR = "{\"jsonrpc\" : \"2.0\", \"error\" : {\"code\": 101, \"message\": \"Failed to open input stream.\"}, \"id\" : \"id\"}";  
  27.       
  28.     /** 
  29.      * 用于Plupload插件的文件上传,自动生成唯一的文件保存名 
  30.      * @param plupload - 存放上传所需参数的bean 
  31.      * @param dir - 保存目标文件目录 
  32.      * @throws IllegalStateException 
  33.      * @throws IOException 
  34.      */  
  35.     public static void upload(Plupload plupload, File dir) throws IllegalStateException, IOException {  
  36.         //生成唯一的文件名  
  37.         String filename = "" + System.currentTimeMillis() + plupload.getName();  
  38.         upload(plupload, dir, filename);  
  39.     }  
  40.       
  41.     /** 
  42.      * 用于Plupload插件的文件上传 
  43.      * @param plupload - 存放上传所需参数的bean 
  44.      * @param dir - 保存目标文件目录 
  45.      * @param filename - 保存的文件名 
  46.      * @throws IllegalStateException 
  47.      * @throws IOException 
  48.      */  
  49.     public static void upload(Plupload plupload, File dir, String filename) throws IllegalStateException, IOException {  
  50.         int chunks = plupload.getChunks();  //获取总的碎片数  
  51.         int chunk = plupload.getChunk();    //获取当前碎片(从0开始计数)  
  52.           
  53.         System.out.println(plupload.getMultipartFile() + "----------");  
  54.           
  55.         MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) plupload.getRequest();   
  56.         MultiValueMap<String, MultipartFile> map = multipartRequest.getMultiFileMap();  
  57.           
  58.         if(map != null) {  
  59.             if (!dir.exists()) dir.mkdirs();    //如果目标文件夹不存在则创建新的文件夹  
  60.               
  61.             //事实上迭代器中只存在一个值,所以只需要返回一个值即可  
  62.             Iterator<String> iter = map.keySet().iterator();  
  63.             while(iter.hasNext()) {  
  64.                 String str = (String) iter.next();  
  65.                 List<MultipartFile> fileList =  map.get(str);  
  66.                 for(MultipartFile multipartFile : fileList) {  
  67.                     //因为只存在一个值,所以最后返回的既是第一个也是最后一个值  
  68.                     plupload.setMultipartFile(multipartFile);  
  69.                       
  70.                     //创建新目标文件  
  71.                     File targetFile = new File(dir.getPath()+ "/" + filename);  
  72.                       
  73.                     //当chunks>1则说明当前传的文件为一块碎片,需要合并  
  74.                     if (chunks > 1) {  
  75.                         //需要创建临时文件名,最后再更改名称  
  76.                         File tempFile = new File(dir.getPath()+ "/" + multipartFile.getName());  
  77.                         //如果chunk==0,则代表第一块碎片,不需要合并  
  78.                         saveUploadFile(multipartFile.getInputStream(), tempFile, chunk == 0 ? false : true);  
  79.                           
  80.                         //上传并合并完成,则将临时名称更改为指定名称  
  81.                         if (chunks - chunk == 1) {  
  82.                             tempFile.renameTo(targetFile);  
  83.                         }  
  84.                           
  85.                     } else {  
  86.                         //否则直接将文件内容拷贝至新文件  
  87.                         multipartFile.transferTo(targetFile);  
  88.                     }  
  89.                 }  
  90.             }  
  91.         }  
  92.           
  93.     }  
  94.       
  95.     /** 
  96.      * 保存上传文件,兼合并功能 
  97.      */  
  98.     private static void saveUploadFile(InputStream input, File targetFile, boolean append) throws IOException {  
  99.         OutputStream out = null;  
  100.         try {  
  101.             if (targetFile.exists() && append) {  
  102.                 out = new BufferedOutputStream(new FileOutputStream(targetFile, true), BUF_SIZE);  
  103.             } else {  
  104.                 out = new BufferedOutputStream(new FileOutputStream(targetFile), BUF_SIZE);  
  105.             }  
  106.               
  107.             byte[] buffer = new byte[BUF_SIZE];  
  108.             int len = 0;  
  109.             //写入文件  
  110.             while ((len = input.read(buffer)) > 0) {  
  111.                 out.write(buffer, 0, len);  
  112.             }  
  113.         } catch (IOException e) {  
  114.             throw e;  
  115.         } finally {  
  116.             //关闭输入输出流  
  117.             if (null != input) {  
  118.                 try {  
  119.                     input.close();  
  120.                 } catch (IOException e) {  
  121.                     e.printStackTrace();  
  122.                 }  
  123.             }  
  124.             if (null != out) {  
  125.                 try {  
  126.                     out.close();  
  127.                 } catch (IOException e) {  
  128.                     e.printStackTrace();  
  129.                 }  
  130.             }  
  131.         }  
  132.     }  
  133.       
  134.     /** 
  135.      * 判断是否全部上传完成 
  136.      * 碎片需合并后才返回真 
  137.      */  
  138.     public static boolean isUploadFinish(Plupload plupload) {  
  139.         return (plupload.getChunks() - plupload.getChunk() == 1);  
  140.     }  
  141.       
  142.       
  143. }  

  1. import javax.servlet.http.HttpServletRequest;  
  2.   
  3. import org.springframework.web.multipart.MultipartFile;  
  4.   
  5. /** 
  6.  * Plupload是一个上传插件。 
  7.  * 这是一个bean类,主要存储Plupload插件上传时需要的参数。 
  8.  * 属性名不可随意改动. 
  9.  * 这里主要使用MultipartFile文件上传方法 
  10.  */  
  11. public class Plupload {  
  12.       
  13.     /**文件临时名(打文件被分解时)或原名*/  
  14.     private String name;  
  15.     /**总的块数*/  
  16.     private int chunks = -1;  
  17.     /**当前块数(从0开始计数)*/  
  18.     private int chunk = -1;  
  19.     /**HttpServletRequest对象,不能直接传入进来,需要手动传入*/  
  20.     private HttpServletRequest request;  
  21.     /**保存文件上传信息,不能直接传入进来,需要手动传入*/  
  22.     private MultipartFile multipartFile;  
  23.       
  24.     public String getName() {  
  25.         return name;  
  26.     }  
  27.   
  28.     public void setName(String name) {  
  29.         this.name = name;  
  30.     }  
  31.   
  32.     public int getChunks() {  
  33.         return chunks;  
  34.     }  
  35.   
  36.     public void setChunks(int chunks) {  
  37.         this.chunks = chunks;  
  38.     }  
  39.   
  40.     public int getChunk() {  
  41.         return chunk;  
  42.     }  
  43.   
  44.     public void setChunk(int chunk) {  
  45.         this.chunk = chunk;  
  46.     }  
  47.   
  48.     public HttpServletRequest getRequest() {  
  49.         return request;  
  50.     }  
  51.   
  52.     public void setRequest(HttpServletRequest request) {  
  53.         this.request = request;  
  54.     }  
  55.   
  56.     public MultipartFile getMultipartFile() {  
  57.         return multipartFile;  
  58.     }  
  59.   
  60.     public void setMultipartFile(MultipartFile multipartFile) {  
  61.         this.multipartFile = multipartFile;  
  62.     }  
  63.       
  64. }  

最后就是测试类了,这部分不是重点,比较粗糙
  1. import java.io.File;  
  2. import java.io.IOException;  
  3.   
  4. import javax.servlet.http.HttpServletRequest;  
  5. import javax.servlet.http.HttpServletResponse;  
  6.   
  7. import org.springframework.stereotype.Controller;  
  8. import org.springframework.web.bind.annotation.RequestMapping;  
  9. import org.springframework.web.bind.annotation.RequestMethod;  
  10.   
  11. @Controller  
  12. public class uploadAction {  
  13.     public static final String FileDir = "uploadfile/";  
  14.       
  15.     /**上传界面*/  
  16.     @RequestMapping("/uploadui")  
  17.     public String uploadUI() {  
  18.           
  19.         return "login.upload";  
  20.     }  
  21.       
  22.     /**上传处理方法*/  
  23.     @RequestMapping(value="/upload", method = RequestMethod.POST)  
  24.     public String upload(Plupload plupload,HttpServletRequest request, HttpServletResponse response) {  
  25.           
  26.         //System.out.println(plupload.getChunk() + "===" + plupload.getName() + "---" + plupload.getChunks());  
  27.           
  28.         plupload.setRequest(request);  
  29.         //文件存储路径  
  30.         File dir = new File(plupload.getRequest().getSession().getServletContext().getRealPath("/") + FileDir);  
  31.           
  32.         System.out.println(dir.getPath());  
  33.           
  34.         try {  
  35.             //上传文件  
  36.             PluploadUtil.upload(plupload, dir);  
  37.             //判断文件是否上传成功(被分成块的文件是否全部上传完成)  
  38.             if (PluploadUtil.isUploadFinish(plupload)) {  
  39.                 System.out.println(plupload.getName() + "----");  
  40.             }  
  41.               
  42.         } catch (IllegalStateException e) {  
  43.             // TODO Auto-generated catch block  
  44.             e.printStackTrace();  
  45.         } catch (IOException e) {  
  46.             // TODO Auto-generated catch block  
  47.             e.printStackTrace();  
  48.         }  
  49.           
  50.         return "login.upload";  
  51.     }  
  52. }  
好了,到此重点部分的工作算是完成了,需要提醒一下的就是,在前台JS部分有一个rename参数,如果设置成true,后台就获取不到文件的真实名称了,后台获取真实名称也不在是MultipartFile的getOriginalFilename()方法了,因为被分块的文件名称会改变,而需要使用Plupload.getName()获取。

附上上传成功界面图(这里把设置的文件是没有限制):


至于后面的如何将状态码以JOSN形式返回与前台进行交互和文件大小一次性上传大小的限制,就在往后用到了在详述吧。


以上观点均为个人意见,欢迎指正与批评。

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    编程技术学习交流群 :154514123
    微信
    个人资料
    • 访问:514385次
    • 积分:7690
    • 等级:
    • 排名:第2888名
    • 原创:304篇
    • 转载:34篇
    • 译文:2篇
    • 评论:102条
    最新评论