你的位置:首页 > Java教程

[Java教程]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.Java代码  收藏代码

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

5、在springmvc.Java代码  收藏代码

  1. <bean  
  2.   
  3. id="multipartResolver"  >  
  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、有的朋友问,上传的东西在服务器中,项目重启就会丢失,怎么办,其实这个在真实项目中会做专门处理,不需要考虑。