页面代码:
<div id="pimg"> <input type="hidden" id="pic" name="pic" value="${p.pic}"> </div> <input class="common-text required" id="file" name="file" size="50" value="" type="file" multiple>
js代码:
$("#pimg div p").click(function (){ $(this).parent().remove(); var pic=$("#pic").val(); var p=$(this).data("pic"); //abc indexOf("a") //index(子字符串) 返回子字符串在字符串中的索引 如果没有返回-1 if(pic.indexOf(p+",")>=0){ pic=pic.replace(p+",",""); } else if(pic.indexOf(","+p)>=0){ pic=pic.replace(","+p,""); } else if(pic.indexOf(p)>=0){ pic=pic.replace(p,""); } $("#pic").val(pic); }); $("#file").change(function (){ var length=$("#file")[0].files.length; if(length>5){ alert("最多上传5个图片"); return; } //html对象 jquery对象->html对象 jquery对象[0] html对象->jquery对象 $(html对象) var formData=new FormData($("#myform")[0]); $.ajax({ url:"${path}/manage/product/upload", type:"post", data:formData, contentType:false, processData:false, success:function (data){ var arr=data.split(","); for(var p of arr){ var img=$("<img>"); img.attr("src","${path}"+p); $("#pimg").append(img); } var pic=$("#pic").val(); if(pic!=""){ $("#pic").val(pic+","+data); } else{ $("#pic").val(data); } } }); });
控制器上传方法代码:
@PostMapping("add") public String add(MultipartFile file, Product product, HttpServletRequest request) throws IOException { //获得提交图片的名字 String fileName=file.getOriginalFilename(); //获得图片的后缀名 String fileExt=fileName.substring(fileName.lastIndexOf(".")); //生成一个唯一的名字 String newFileName= UUID.randomUUID().toString().replace("-","")+fileExt; //获得当前运行项目的真实路径 String path=request.getServletContext().getRealPath("/")+"images/"+newFileName; //保存图片 file.transferTo(new File(path)); product.setPic("/images/"+newFileName); ProductDAO.getDAO().add(product); return "redirect:/manage/product/list"; }
实现效果:
0条评论
点击登录参与评论