前端：
<form method="post" enctype="multipart/form-data" id="formSubmit"> <div class="row"> <div class="col-lg-12" style="padding-left:25px;padding-top: 5px"> <label>請選擇文件</label> <input type="file" name="file" title="點擊選擇文件" multiple="" accept="*/*" class="form-control"> </div> </div> <div class="row"> <div style="padding-left:25px;padding-top:10px"> <input type="submit" class="btn btn-primary"> </div> </div> </form>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
JS：
$(
'#formSubmit'
).submit(
function
(event) {
//首先驗證文件格式
var
fileName = $(
this
).find(
"input[name=file]"
).val();
if
(fileName ===
''
) {
alert(
'請選擇文件'
);
return
;
}
// mulitipart form,如文件上傳類
var
formData =
new
FormData(
this
);
$.ajax({
async:
false
,
type:
"POST"
,
url:
"/upload"
,
data: formData,
dataType:
"JSON"
,
mimeType:
"multipart/form-data"
,
contentType:
false
,
cache:
false
,
processData:
false
,
success:
function
(data) {
if
(data.success) {
layer.alert(
"上傳成功"
)
}
else
{
layer.alert(data.error)
}
}
});
return
false
;
});
|
js代碼的最后需要return false 防止表單重復提交，刷新頁面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
java:
@RequestMapping(value =
"/upload"
, method = RequestMethod.POST, produces =
"application/json;charset=utf-8"
)
@ResponseBody
public SimpleAjaxResponse uploadSingleFile(HttpServletRequest request, Model model) {
try
{
DefaultMultipartHttpServletRequest httpServletRequest = (DefaultMultipartHttpServletRequest) request;
MultipartFile multipartFile = httpServletRequest.getFile(
"file"
);
return
new
SimpleAjaxResponse(
true
);
}
catch
(Exception e) {
LOGGER.error(e.getMessage(), e);
e.printStackTrace();
return
new
SimpleAjaxResponse(
"上傳出錯了"
);
}
}
|