maven工程 java 实现文件上传 SSM ajax异步请求上传

 1 <!-- 配置文件解析器 -->
 2         <bean id="multipartResolver"
 3             class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
 4             p:defaultEncoding="utf-8">
 5             <property name="uploadTempDir" value="/temp"></property>
 6             <property name="maxUploadSize">
 7                 <value>209715200</value><!-- 200MB -->
 8             </property>
 9             <property name="maxInMemorySize">
10                 <value>4096</value><!-- 4KB大小读写 -->
11             </property>
12         </bean>

 1 <!--上传文件相关的jar包  -->
 2          <dependency>
 3             <groupId>commons-io</groupId>
 4             <artifactId>commons-io</artifactId>
 5             <version>2.4</version>
 6           </dependency>
 7           
 8           <dependency>
 9             <groupId>commons-fileupload</groupId>
10             <artifactId>commons-fileupload</artifactId>
11             <version>1.3.1</version>
12           </dependency>
13           
14           <dependency>
15             <groupId>org.apache.commons</groupId>
16             <artifactId>commons-lang3</artifactId>
17             <version>3.3.2</version>
18           </dependency>

 1 /**
 2      * 单文件上传
 3      * @param file
 4      * @param request
 5      * @return
 6      * @throws IllegalStateException
 7      * @throws IOException
 8      * @throws JSONException
 9      */
10     public static String simUpload(MultipartFile file, HttpServletRequest request) 
11             throws IllegalStateException, IOException, JSONException{
12         
13         if(!file.isEmpty()){
14             String path = request.getSession().getServletContext().getRealPath("/upload");
15             //定义文件
16             File parent = new File(path);
17             if(!parent.exists()) parent.mkdirs();
18             
19             HashMap<String, Object> map = new HashMap<String,Object>();
20             
21             String oldName = file.getOriginalFilename();
22             
23             long size = file.getSize();
24             
25             //使用TmFileUtil文件上传工具获取文件的各种信息
26             //优化文件大小
27             String sizeString = TmFileUtil.countFileSize(size);
28             //获取文件后缀名
29             String ext = TmFileUtil.getExtNoPoint(oldName);
30             //随机重命名，10位时间字符串
31             String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss");
32             
33             String url = "upload/"+newFileName;
34             
35             //文件传输，parent文件
36             file.transferTo(new File(parent, newFileName));
37             
38             map.put("oldname",oldName);//文件原名称
39             map.put("ext",ext);
40             map.put("size",sizeString);
41             map.put("name",newFileName);//文件新名称
42             map.put("url",url);
43             
44             //以json方式输出到页面
45             return JSONUtil.serialize(map);
46         }else{
47             return null;
48         }
49     }

 1 /**
 2      * 多文件上传
 3      * @param files
 4      * @param request
 5      * @return
 6      * @throws IllegalStateException
 7      * @throws IOException
 8      * @throws JSONException
 9      */
10     public static List<HashMap<String, Object>> mutlUpload(MultipartFile[] files, HttpServletRequest request) 
11             throws IllegalStateException, IOException, JSONException{
12         
13         if(files.length > 0){
14             String path = request.getSession().getServletContext().getRealPath("/upload");
15             //定义文件
16             File parent = new File(path);
17             if(!parent.exists()) parent.mkdirs();
18             
19             //创建这个集合保存所有文件的信息
20             List<HashMap<String, Object>> listMap = new ArrayList<HashMap<String, Object>>();
21             
22             //循环多次上传多个文件
23             for (MultipartFile file : files) {
24                 
25                 //创建map对象保存每一个文件的信息
26                 HashMap<String, Object> map = new HashMap<String,Object>();
27                 
28                 String oldName = file.getOriginalFilename();
29 
30                 long size = file.getSize();
31                 
32                 //使用TmFileUtil文件上传工具获取文件的各种信息
33                 //优化文件大小
34                 String sizeString = TmFileUtil.countFileSize(size);
35                 //获取文件后缀名
36                 String ext = TmFileUtil.getExtNoPoint(oldName);
37                 //随机重命名，10位时间字符串
38                 String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss");
39                 
40                 String url = "upload/"+newFileName;
41                 
42                 //文件传输，parent文件
43                 file.transferTo(new File(parent, newFileName));
44                 
45                 map.put("oldname",oldName);//文件原名称
46                 map.put("ext",ext);
47                 map.put("size",sizeString);
48                 map.put("name",newFileName);//文件新名称
49                 map.put("url",url);
50                 
51                 listMap.add(map);
52             }
53             
54             //以json方式输出到页面
55             return listMap;
56         }else{
57             return null;
58         }
59     }

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3     String path = request.getContextPath();
  4     String basePath = request.getScheme()+"://"+request.getServerName()+path+"/";
  5     pageContext.setAttribute("basePath", basePath);
  6 %>
  7 <!DOCTYPE HTML>
  8 <html>
  9   <head>
 10       <title>文件上传</title>
 11     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 12     <meta name="keywords" content="keyword1,keyword2,keyword3">
 13     <meta name="description" content="This is my page">
 14     <style>
 15         *{padding: 0;margin:0}
 16         ul,li{list-style:none;}
 17         a{color:#333;text-decoration: none;}
 18         .hidden{display:hidden;}
 19         input{border:0;outline:0;margin-bottom:10px;}
 20         img{vertical-align: middle;}
 21         .clear{clear:both;}
 22         body{font-size:14px;font-family: "微软雅黑";background:#333}
 23         .buttons{    display: block;
 24                     width: 80px;
 25                     height: 26px;
 26                     color: black;
 27                     background: #ffffff;
 28                     font-size: 14px;
 29                     font-family: "微软雅黑";
 30                     margin: 0 auto;
 31                     cursor: pointer;
 32                     margin-bottom: 10px;}
 33         
 34         .container{width:1080px;margin:80px auto;}
 35         
 36         .formbox{float:left;text-align:center;width:300px;}
 37         .title{color:#fff;font-size:24px;margin-bottom:20px;}
 38         .formbox .f_btn{width:100px;height:40px;background:#0c0;color:#fff;font-size:14px;font-family:"微软雅黑";cursor:pointer;font-weight:bold;}
 39         .massage p{color:#fff;text-align:left;height:24px;}
 40         .sinimg{width:300px;height:300px;line-height:300px;color:#fff;}
 41 
 42         .formmutibox{float:left;width: 342px;margin: 0 24px 0;text-align:center;}
 43         .formmutibox .title{color:#fff;font-size:24px;margin-bottom:20px;}
 44         .formmutibox .f_btn{width:100px;height:40px;background:#0c0;color:#fff;font-size:14px;font-family:"微软雅黑";cursor:pointer;font-weight:bold;}
 45         .files table td{color:#fff;width:135px;}
 46         
 47         ::-webkit-scrollbar{width: 10px;height: 10px;}
 48         ::-webkit-scrollbar-track{background: 0 0;}
 49         ::-webkit-scrollbar-track-piece{background:#fff;}
 50         ::-webkit-scrollbar-thumb{background-color: #a2a2a2; border-radius: 5px;}
 51         ::-webkit-scrollbar-thumb:hover{background-color: #868686;}
 52         ::-webkit-scrollbar-corner{background:#212121;}
 53         ::-webkit-scrollbar-resizer{background:#FF0BEE;}
 54         scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
 55         scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
 56         scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}
 57         /* 隐藏上下箭头 */
 58         scrollbarbutton{display:none !important;}
 59         /* 纵向滚动条宽度 */
 60         scrollbar[orient="vertical"]{min-width:12px !important;}
 61     </style>
 62   </head>
 63   <body>
 64       <div class="container">
 65         <!--单文件上传-->
 66         <div class="formbox">
 67             <p class="title">单个文件上传</p>
 68             <input type="file" id="fileupone" name="fileup" accept="image/jpeg,image/png" onchange="uploadFile(this)"/>
 69             <div class="massage">
 70                 <p>文件名：<span class="filename"></span></p>
 71                 <p>大小：<span class="filesize"></span></p>
 72                 <p>文件格式：<span class="fileext"></span></p>
 73                 <p>预览：</p>
 74                 <div class="sinimg">
 75                     预览图
 76                 </div>
 77             </div>
 78         </div>
 79         
 80         <!--多文件上传-->
 81         <div class="formmutibox">
 82             <p class="title">多文件上传（单选）</p>
 83             <input type="file" class="fileupon11" accept="image/jpeg,image/png" />
 84             <input type="file" class="fileupon12" accept="image/jpeg,image/png" />
 85             <input type="file" class="fileupon13" accept="image/jpeg,image/png" />
 86             <input type="button" class="buttons" value="提交" onclick="multipartone()"/>
 87             <!--files start-->
 88             <div class="files">
 89                 <table>
 90                     <thead>
 91                         <tr>
 92                             <td class="filelook2">文件预览</td>
 93                             <td class="filename2">文件名</td>
 94                             <td class="filesize2">大小</td>
 95                         </tr>
 96                     </thead>
 97                     <tbody id="f_tbody">
 98                     </tbody>
 99                 </table>
100             </div>
101         </div>
102     
103           <!--多文件上传-->
104         <div class="formmutibox">
105             <p class="title">多文件上传（多选）</p>
106             <input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/>
107             <!--files start-->
108             <div class="files">
109                 <table>
110                     <thead>
111                         <tr>
112                             <td class="filelook33">文件预览</td>
113                             <td class="filename33">文件名</td>
114                             <td class="filesize33">大小</td>
115                         </tr>
116                     </thead>
117                     <tbody id="f_tbody_m">
118                     </tbody>
119                 </table>
120             </div>
121         </div>
122           <div class="clear"></div>
123     </div>
124       
125       <script type="text/javascript" src="${basePath}/resource/js/jquery-1.11.3.min.js"></script>
126     <script type="text/javascript">var basePath = "${basePath}";</script>
127       <script type="text/javascript">
128       
129           //单文件上传
130         function uploadFile(obj){
131             //创建一个FormData对象：用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
132             var form = new FormData();
133             var fileObj = obj.files[0];
134             form.append("doc",fileObj);
135 
136             $.ajax({
137                 type:"post",
138                 data:form,
139                 url:basePath+"/upload/file",
140                 contentType: false, //必须false才会自动加上正确的Content-Type
141                 /*
142                     必须false才会避开jQuery对 formdata 的默认处理
143                    XMLHttpRequest会对 formdata 进行正确的处理
144                 */
145                 processData: false,
146                 success:function(data){
147                     var jdata = eval("("+data+")");
148                     $(".filename").text(jdata.oldname);
149                     $(".filesize").text(jdata.size);
150                     $(".fileext").text(jdata.ext);
151                     var imgString = "<img alt='预览图' src='"+jdata.url+"' width='300'>";
152                     $(".sinimg").html(imgString);
153                     //清除文件表单
154                     $("#fileupone").val("");
155                 }
156             });
157         }
158           
159           //多文件上传(单选)
160           function multipartone(){
161               var file1 = $(".fileupon11").get(0).files[0];
162               var file2 = $(".fileupon12").get(0).files[0];
163               var file3 = $(".fileupon13").get(0).files[0];
164               //如果都是空，则直接退出
165               if(isEmpty(file1) && isEmpty(file2) && isEmpty(file3)) return;
166               
167               var form = new FormData();
168               //用同一个名字，注入到controller层的参数数组
169             form.append("doc",file1);
170             form.append("doc",file2);
171             form.append("doc",file3);
172 
173             $.ajax({
174                 type:"post",
175                 data:form,
176                 url:basePath+"/upload/mutl",
177                 contentType: false, //必须false才会自动加上正确的Content-Type
178                 /*
179                     必须false才会避开jQuery对 formdata 的默认处理
180                    XMLHttpRequest会对 formdata 进行正确的处理
181                 */
182                 processData: false,
183                 success:function(data){
184                     var len = data.length;
185                     for(var i = 0;i < len;i++){
186                         var datajson = data[i];
187                         $("#f_tbody").append("<tr class='f_item'>"+
188                                 "<td><img src='"+datajson.url+"' alt='预览图像' width='40' height='40' /></td>"+
189                                 "<td>"+datajson.oldname+"</td>"+
190                                 "<td>"+datajson.size+"</td>"
191                             );
192                     }
193                     //清除文件表单
194                     $(".fileupon11").val("");
195                     $(".fileupon12").val("");
196                     $(".fileupon13").val("");
197                 }
198             });
199           }
200           
201           //多文件上传(多选)
202           function mutiFiles(obj){
203               var form = new FormData();
204             var fileObj = obj.files;
205             var length = fileObj.length;
206             //将fileObj转换成数组
207             //var filese = Array.from(fileObj);
208             for(var i = 0;i < length;i++){
209                 form.append("doc",fileObj[i]);
210             }
211             $.ajax({
212                 type:"post",
213                 data:form,
214                 url:basePath+"/upload/mutl",
215                 contentType: false, //必须false才会自动加上正确的Content-Type
216                 /*
217                     必须false才会避开jQuery对 formdata 的默认处理
218                    XMLHttpRequest会对 formdata 进行正确的处理
219                 */
220                 processData: false,
221                 success:function(data){
222                     var len = data.length;
223                     for(var i = 0;i < len;i++){
224                         var datajson = data[i];
225                         $("#f_tbody_m").append("<tr class='f_item'>"+
226                                 "<td><img src='"+datajson.url+"' alt='预览图像' width='40' height='40' /></td>"+
227                                 "<td>"+datajson.oldname+"</td>"+
228                                 "<td>"+datajson.size+"</td>"
229                             );
230                     }
231                     //清除文件表单
232                     $(".fileupon33").val("");
233                 }
234             });
235           }
236           
237           /**
238          * 判断非空
239          * 
240          * @param val
241          * @returns {Boolean}
242          */
243         function isEmpty(val) {
244             val = $.trim(val);
245             if (val == null)
246                 return true;
247             if (val == undefined || val == 'undefined')
248                 return true;
249             if (val == "")
250                 return true;
251             if (val.length == 0)
252                 return true;
253             if (!/[^(^\s*)|(\s*$)]/.test(val))
254                 return true;
255             return false;
256         }
257       </script>
258   </body>
259 </html>

 1 package com.krry.controller;
 2 
 3 import java.io.IOException;
 4 import java.util.HashMap;
 5 import java.util.List;
 6 
 7 import javax.servlet.http.HttpServletRequest;
 8 
 9 import org.apache.struts2.json.JSONException;
10 import org.springframework.stereotype.Controller;
11 import org.springframework.web.bind.annotation.RequestMapping;
12 import org.springframework.web.bind.annotation.RequestParam;
13 import org.springframework.web.bind.annotation.ResponseBody;
14 import org.springframework.web.multipart.MultipartFile;
15 
16 import com.krry.util.UploadUtil;
17 
18 /**
19  * 文件上传类
20  * KrryUploadController
21  * @author krry
22  * @version 1.0.0
23  *
24  */
25 @Controller
26 @RequestMapping("/upload")
27 public class KrryUploadController {
28     
29     /**
30      * 单文件上传
31      * @param file
32      * @param request
33      * @return
34      * @throws IllegalStateException
35      * @throws IOException
36      * @throws JSONException
37      */
38     @ResponseBody
39     @RequestMapping(value = "/file")
40     public String krryupload(@RequestParam("doc") MultipartFile file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{
41 
42         //调用工具类完成上传，返回相关数据到页面
43         return UploadUtil.simUpload(file, request);
44     }
45     
46     /**
47      * 多文件上传
48      * @param file
49      * @param request
50      * @return
51      * @throws IllegalStateException
52      * @throws IOException
53      * @throws JSONException
54      */
55     // 这里的MultipartFile[] file表示前端页面上传过来的多个文件，file对应页面中多个file类型的input标签的name，但框架只会将一个文件封装进一个MultipartFile对象，
56   // 并不会将多个文件封装进一个MultipartFile[]数组，直接使用会报[Lorg.springframework.web.multipart.MultipartFile;.<init>()错误，
57   // 所以需要用@RequestParam校正参数（参数名与MultipartFile对象名一致），当然也可以这么写：@RequestParam("file") MultipartFile[] files。
58     @ResponseBody
59     @RequestMapping(value = "/mutl")
60     public List<HashMap<String, Object>> krryuploadMutl(@RequestParam("doc") MultipartFile[] file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{
61         //调用工具类完成上传，返回相关数据到页面
62         return UploadUtil.mutlUpload(file, request);
63     }
64 }

 1 /**
 2      * 将文件的字节数转换成文件的大小
 3      * com.krry.uitl 
 4      * 方法名：format
 5      * @author krry 
 6      * @param size
 7      * @return String
 8      * @exception 
 9      * @since  1.0.0
10      */
11     public static String format(long size){
12         float fsize = size;
13         String fileSizeString;
14         if (fsize < 1024) {
15             fileSizeString = String.format("%.2f", fsize) + "B"; //2f表示保留两位小数
16         } else if (fsize < 1048576) {
17             fileSizeString = String.format("%.2f", fsize/1024) + "KB";
18         } else if (fsize < 1073741824) {
19             fileSizeString = String.format("%.2f", fsize/1024/1024) + "MB";
20         } else if (fsize < 1024 * 1024 * 1024) {
21             fileSizeString = String.format("%.2f", fsize/1024/1024/1024) + "GB";
22         } else {
23             fileSizeString = "0B";
24         }
25         return fileSizeString;
26     }