java ssm框架实现文件上传
实现：单文件上传、多文件上传(单选和多选)，并且用 ajax 异步刷新，在当前界面显示上传的文件
首先springmvc的配置文件要配置上传文件解析器：
1
2
3 class="org.springframework.monsMultipartResolver"
4 p:defaultEncoding="utf-8">
5
6
7 209715200
8
9
10 4096
11
12
其次在pom.xml中要配置两个上传文件的依赖
1
2
3 commons-io
4 commons-io
5 2.4
6
7
8
9 commons-fileupload
10 commons-fileupload
11 1.3.1
12
13
14
15 mons
16 commons-lang3
17 3.3.2
18
单文件上传：
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 map = new HashMap();
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> 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> listMap = new ArrayList>();
21
22 //循环多次上传多个文件
23 for (MultipartFile file : files) {
24
25 //创建map对象保存每一个文件的信息
26 HashMap map = new HashMap();
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 }
前端代码：
文件多选，实际上在
多加了一个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
2
3 String path = request.getContextPath();
4 String basePath = request.getScheme()+"://"+request.getServerName()+path+"/";
5 pageContext.setAttribute("basePath", basePath);
6 %>
7
8
9
10
文件上传
11
12
13
14
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
62
63
64
65
66
67
单个文件上传
68
69
70
文件名：
71
大小：
72
文件格式：
73
预览：
74
75 预览图
76
77
78
79
80
81
82
多文件上传(单选)
83
84
85
86
87
88
89
90
91
92
文件预览
93
文件名
94
大小
95
96
97
98
99
100
101
102
103
104
105
多文件上传(多选)
106
107
108
109
110
111
112
文件预览
113
文件名
114
大小
115
116
117
118
119
120
121
122
123
124
125
126
127
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 = "";
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("
"+
188 "
"+
189 "
"+datajson.oldname+""+
190 "
"+datajson.size+""
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("
"+
226 "
"+
227 "
"+datajson.oldname+""+
228 "
"+datajson.size+""
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
258
259
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;.()错误，
57 // 所以需要用@RequestParam校正参数(参数名与MultipartFile对象名一致)，当然也可以这么写：@RequestParam("file") MultipartFile[] files。
58 @ResponseBody
59 @RequestMapping(value = "/mutl")
60 public List> 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 }
