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 stubString 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 blocke.printStackTrace();} }}return "上传成功！";
}

springMVC使用multipart实现Ctrl建批量上传图片相关推荐

ASP.net（C#）批量上传图片（完整版）
来自:http://blog.itpub.net/9869521/viewspace-667955/ 这篇关于ASP.Net批量上传图片的文章写得非常好,偶尔在网上看到想转载到这里,却费劲了周折.为了 ...
【java】批量上传图片并回显功能
一.前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
java批量上传图片预览_SpringMVC批量上传图片，实现上传前图片预览
最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没 ...
CkEditor批量上传图片(java)
CKEditor上传视频 CKEditor批量上传图片 flvplayer.swf播放器 CKEditor整合包(v4.6.1) ----------------------------------- ...
php批量添加图片,PHP批量上传图片的具体实现方法介绍._PHP教程
大家可以通过下面这一段代码,来具体了解PHP批量上传图片的具体方式.我们在学习PHP的时候,肯定是要从实际操作中慢慢积累经验,以巩固我们所学到的知识,逐渐的加强我们的编程水平. •PHP保护文件系统的 ...
java上传图片回显_【java】批量上传图片并回显功能
一.前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
React之批量上传图片
文章目录本文将介绍两种方式进行批量上传图片(原始input/antdUpload) 两种方式的区别 1. 原始input是将图片存为一个对象数组,将不合格的图片过滤掉之后,一次性提交给后端 2. a ...
vue element 批量上传图片
最近项目中新增了一个批量导入图片的需求,选择完图片之后先生成一个图片列表.点击确认之后调用后端的接口批量上传图片:由于之前没有接触过,搞了两天才弄完,想记录一下首先后端给我的接口header部分是C ...
python批量上传服务器_Python Tornado批量上传图片并显示功能
简介 Tornado龙卷风是一个开源的网络服务器框架,它是基于社交聚合网站FriendFeed的实时信息服务开发而来的.2007年由4名Google前软件工程师一起创办了FriendFeed,旨在使用 ...

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

springMVC使用multipart实现Ctrl建批量上传图片相关推荐

最新文章

热门文章