springmvc实现多图片上传：
主要是项目要做的是一个发表分享的功能，就有点像微信发朋友圈那样，一个内容文字和图片显示。
思路：用form表单提交，在form表单选择多张图片，有文字说明，后台springmvc接受数据。接受数据有文字，有多张图片，有是谁发表分享的用户id。那就用一个类把这些数据封装起来；之后把这些数据存到数据库里。
工具：IDEA
数据库：mysql
页面：jsp
前端页面：
<div class="col-sm-6 col-xs-12 my_edit" > <div class="row" id="edit_form" > <span class="pull-left" style="margin:15px;">编写新鲜事</span> <span class="tips pull-right" style="margin:15px;"></span> <form role="form" id="fileform" action="<%=request.getContextPath()%>/upload/uploadfiles" method="post" enctype="multipart/form-data" style="margin-top: 50px;"> <div class="form-group"> <div class="col-sm-12" > <textarea id="content" name="content" rows="2" cols="20" style="width: 343px;height: 95px"></textarea> </div> <input type="hidden" name="userid" value="[email protected]"> <br> <div id="spu_img"> <div id="spu_img_div_0" style="border:1px solid #333;width:80px;height:80px;float:left;"> <img id = "img_0" style="cursor:pointer" src="<%=request.getContextPath()%>/public/content/publishContent/img/pic.png" width="80px" height="80px" onclick="spu_add_img_click(0)"/> <input id="file_0" type="file" name="files" style="display:none;" onChange="spu_add_img_change(0)" /><br> </div> </div> <div class="col-sm-12" style="margin-top: 12px;"> <button class="btn btn-default btn-search" name="search" type="submit" onclick="search()">发布</button> </div> </div> </form> </div>
使用js通过点击图片来显示我们选择的图片
<script type="text/javascript"> function spu_add_img_click(index){ if (index<3){ // 调用按钮对应的file对象的点击事件 $("#file_"+index).click(); }else{ alert("文件只能上传3张"); } } function spu_add_img_change(index){ // 获得图片缓存 var blob = $("#file_"+index)[0].files[0]; // 转化成url var url = window.URL.createObjectURL(blob); // 赋值给src $("#img_"+index).attr("src",url); // 判断用户当前点击的图片是不是组后一个按钮图片 var length = $("#spu_img :file").length; if((length-1)==index){ spu_add_img_add(index); } } function spu_add_img_add(index){ var a = '<div id="spu_img_div_'+(index+1)+'" style="margin-left:10px;border:1px solid #333;width:80px;height:80px;float:left;">'; var b = '<img id = "img_'+(index+1)+'" style="cursor:pointer" src="<%=request.getContextPath()%>/public/content/publishContent/img/pic.png" width="80px" height="80px" onclick="spu_add_img_click('+(index+1)+')"/>'; var c = '<input id="file_'+(index+1)+'" type="file" name="files" style="display:none;" onChange="spu_add_img_change('+(index+1)+')" /><br>'; var d = '</div>'; $("#spu_img").append(a+b+c+d); } </script>
点击发布把数据发到后台，springmvc接受数据。把userid,content,files封装成一个ContentByImg类，让springmvc通过自动注入方式获取从前端页面传过来的值
public class ContentByImg implements Serializable { private String userid; private String content; private MultipartFile[] files; public ContentByImg() { } public String getUserid() { return userid; } public void setUserid(String userid) { this.userid = userid; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public MultipartFile[] getFiles() { return files; } public void setFiles(MultipartFile[] files) { this.files = files; } @Override public String toString() { return "ContentByImg{" + "userid='" + userid + '\'' + ", content='" + content + '\'' + ", files.sieze()=" + files.length + '}'; } }
springmvc后台处理，对应多张图片又有一个文件处理类来处理，处理完返回图片的名字集合，因为数据库的content表设计的是放3张图片，所以要用一个数组把多张图片的名字插入数据表中。
/** * 文件上传处理 * Created by ASUS on 2018/5/10 * * @Authod Grey Wolf */ import java.io.File; import java.util.List; import net.stxy.one.model.Content; import net.stxy.one.model.ContentByImg; import net.stxy.one.model.Page; import net.stxy.one.service.ContentService; import net.stxy.one.utils.FileUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.servlet.ModelAndView; @Controller @RequestMapping("/upload") public class UploadController { @Autowired private FileUtils fileUtils; @Autowired private ContentService contentService; @RequestMapping("uploadfiles") public String uploadfiles(ContentByImg contentByImg,Model model) { System.out.println("---content:0"+contentByImg.toString()); // 上传图片，返回图片名称集合 List<String> list_image = fileUtils.getImgPath(contentByImg.getFiles()); String []pic=new String[3]; int i=0; for (String s:list_image){ System.out.println("filename:"+s); pic[i++]=s; } Content content1=new Content(); content1.setPic1(pic[0]); content1.setPic2(pic[1]); content1.setPic3(pic[2]); content1.setContent(contentByImg.getContent()); content1.setUserid(contentByImg.getUserid()); //把数据插入到数据库content表中 contentService.insertContent(content1); Page page=new Page(3,0); //查询数据库content表，获取结果集合，在页面显示刚才发布的信息，图片 List<Content>listCotent=contentService.selectPageList(page); model.addAttribute("listContent",listCotent); return "index"; } }
/** * 文件上传处理工具 * Created by ASUS on 2018/5/10 * * @Authod Grey Wolf */
/** * Created by IntelliJ IDEA * User: Litongxue * Time: 2018/5/2 * Description: TODO 文件操作工具类 */ @Component public class FileUtils { //文件储存路径 private final static String UPLOADURL="C:\\Users\\ASUS\\Pictures\\SharedImageServer\\contentpic\\"; public String createFileName(String originalFilename) { String hzm = originalFilename.split("\\.")[1]; return UUID.randomUUID().toString().replace("-", "") + "." + hzm; } public String getFileName(String originalFilename){ String fileName=String.valueOf(System.currentTimeMillis()) + "." + originalFilename; return fileName; } public List getImgPath(MultipartFile[] files) { List<String> list = new ArrayList<>(); // String uploadUrl = "C:\\Users\\ASUS\\Pictures\\SharedImageServer\\contentpic\\"; for (MultipartFile file : files) { if("".equals(file.getOriginalFilename())){ continue; } //获取上传图片的文件名,变为时间+图片名 String fileName = getFileName(file.getOriginalFilename()); System.out.println("filename:" + fileName); String filePath = UPLOADURL + fileName; //创建文件对象 File tagetFile = new File(UPLOADURL + fileName); list.add(fileName); //文件名不存在 则新建文件，并将文件复制到新建文件中 if (!tagetFile.exists()) { try { tagetFile.createNewFile(); } catch (IOException e) { e.printStackTrace(); } try { //保存图片 file.transferTo(tagetFile); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } } for (String s : list) { System.out.println("s;::" + s); } return list; } }
why:为什么是把图片名字插进去，而不是把图片的全路径插进去呢？
因为我选择的不是把多张图片直接传到我的项目文件夹下，而是选择存到电脑其他盘的文件下，所以选择使用nginx作为图片服务器，只要打开nginx服务器，那么jsp页面的图片路径src=nginx设置的路径+数据库存的图片名字就可以显示了。
不会搭建图片服务器可以看看：Windows实现nginx作为图片服务器
我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。