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" οnchange="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" οnchange="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="提交" οnclick="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" οnchange="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 }
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
