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

java ssm框架实现文件上传 

实现:单文件上传、多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件

首先springmvc的配置文件要配置上传文件解析器:

 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>

其次在pom.xml中要配置两个上传文件的依赖

 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     }

前端代码:

文件多选,实际上在

<input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/>

多加了一个 multiple 属性。

要想在当前界面显示上传的文件,而不跳转,就利用 ajax 异步请求:

不过需要注意的是,我这里使用 FormData() 储存文件对象, ajax 要配上这几个参数才可实现文件上传:

$.ajax({   type:"post",   data:form,  //FormData()对象   url:basePath+"/upload/mutl",   contentType: false, //必须false才会自动加上正确的Content-Type   processData: false, //必须false才会避开jQuery对 formdata 的默认处理     , XMLHttpRequest会对 formdata 进行正确的处理   success:function(data){

  }

});

  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>

controller层调用:

 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 }

到这里,完成 ajax异步请求文件上传 的功能。

附上优化文件大小的代码:

 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     }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进步博客

解决CSV文件中长数字以科学记数格式保存问题

12120
来自专栏有趣的django

python爬虫入门(三)XPATH和BeautifulSoup4

 XML和XPATH 用正则处理HTML文档很麻烦,我们可以先将 HTML文件 转换成 XML文档,然后用 XPath 查找 HTML 节点或元素。 XML 指...

40140
来自专栏贺贺的前端工程师之路

ES6特性-Generators

你可以将Generators认为是可以中断进程、恢复进程的代码段,like this:

7520
来自专栏landv

实现用VB.Net/(C#)开发K/3 BOS 插件的真正可行方法

16510
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

5.8K70
来自专栏CRPER折腾记

Vue折腾记 - (3)写一个不大靠谱的typeahead组件

typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的typeahead;

8810
来自专栏salesforce零基础学习

salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

25330
来自专栏机器学习算法与Python学习

Python:爬虫系列笔记(8) -- 爬去MM图片

转载于:静觅 » Python爬虫实战四之抓取淘宝MM照片 链接:http://cuiqingcai.com/1001.html 1.抓取淘宝MM的姓名,头像,...

44260
来自专栏雨过天晴

原 荐 PHP 在 Console 模式下的

18410
来自专栏黒之染开发日记

【easeljs】事件汇总

文章说明:为了方便我自己查找easeljs的所有事件,所以我从easeljs的文档里抄过来加上自己的翻译,会慢慢补全,漏了的,错了的,评论一下我会补上去哦。(不...

14120

扫码关注云+社区

领取腾讯云代金券