springMVC使用multipart实现Ctrl建批量上传图片

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 "上传成功!";	
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值