springMVC使用multipart实现Ctrl建批量上传图片,包括上传大小,格式的判断
//引入了jqeury.form.js插件,该插件可以很好的封装form表单的信息。
//因为上传文件需要用到 所以想要ajax实现异步上传需要用到上面提到的插件
前端:
//html:
<form id="form_addphoto" action="/photo" method="post" enctype="multipart/form-data">
<label for="file" class="btn btn-info">上传图片</label>
<input id="file" type="file" name="files" class="hidden" multiple="multiple"/>
<!-- 用来存放aid -->
<!-- <input id="form_input_aid" name="aid" th:value="${aid}" class="hidden" /> -->
<input type="submit" class="hidden" />
<input id='form_input_aid' name='aid' class='hidden' ></input>
<button type="button" class="btn btn-default" id="btn_batch">
批量管理</button>
<button type="button" class="btn btn-default" id="btn_returnAlbum">
返回</button>
</form>
//js:
//当input file内容改变时,执行上传(添加)图片
$("#file").change(function(){
var flagSize = false;
var flagName=false;
var files = $(this)[0].files;
//总大小
var totalSize = 0;
for(var i=0; i<files.length; i++){
//上传图片总大小
totalSize += files[i].size/1024/1024;
//判断单张大小
if(files[i].size/1024/1024>10){
flagSize = true;
}
//判断格式
var extStart=files[i].name.lastIndexOf(".");
var ext=files[i].name.substring(extStart,files[i].length).toUpperCase();
if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
flagName=true
}
}
if(flagName){
alert("图片限于png,gif,jpeg,jpg格式");
$(this).val("");
return false;
}
else if(flagSize){
alert("对不起,单张照片必须小于10M");
$(this).val("");
return false;
}else if(totalSize>20){
alert("对不起,一次性最多上传图片大小为20M");
$(this).val("");
return false;
}else{
$("#form_addphoto").ajaxSubmit(function(e){
if("上传成功!"==e){
$("#file").val("");
var img_aid = $("#form_input_aid").val();
//构建ajax,查询对应的图片
$.ajax({
url:"/photos/"+img_aid,
async:"false",
success:function(pageInfo){
if(pageInfo.list.length==0){
//显示照片的按钮,隐藏相册按钮
$("#div_img").empty();
$("#div_addPhoto").removeClass("hidden");
$("#div_add_btn").addClass("hidden");
}else{
//显示照片的按钮,隐藏相册按钮
$("#div_img").empty();
$("#div_addPhoto").removeClass("hidden");
$("#div_add_btn").addClass("hidden");
//构建照片页面
to_page(cPage);
$("#form_addphoto").outerHTML;
}
}
});
}else{
alert(e);
}
return false;
});
}
$(this).val("");
});
//后台
//controller层
// 可批量添加(上传)照片
@PostMapping("/photo")
@ResponseBody
public String addPhoto(@RequestParam("files") MultipartFile[] fileUploads, @RequestParam("aid") Integer aid,
HttpSession session) {
User user = (User) session.getAttribute("user");
// 获取文件名
return photoService.addPhoto(fileUploads, user.getUid(), aid);
}
//service层
public String addPhoto(MultipartFile[] fileUploads, Integer uid, Integer aid) {
if(fileUploads!=null && fileUploads.length>0) {
for(int i = 0;i<fileUploads.length;i++) {
MultipartFile fileUpload = fileUploads[i];
// TODO Auto-generated method stub
String fileName = fileUpload.getOriginalFilename();
// 获取文件后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
// 重新生成文件名
fileName = UUID.randomUUID() + suffixName;
// 指定本地文件夹存储图片
String filePath = "D:/develop/resource/" + uid + "/" + aid;
// 将图片保存到自定义文件夹里(电脑磁盘)
File file = new File(filePath + "/" + fileName);
try {
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
file.createNewFile();
}
fileUpload.transferTo(file);
Photo photo = new Photo();
// 获取时间
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
String time = format.format(date);
photo.setPhCreateTime(time);
photo.setImg("/" + uid + "/" + aid + "/" + fileName);
photo.setAid(aid);
photoMapper.insertSelective(photo);
} catch (IllegalStateException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
return "上传成功!";
}