AJAX+JQuery+SpringMVC实现图片上传

xiaoxiao2021-03-25 103

利用ajax实现前端与后台的交互，从服务端获取数据，并调回到前端进行解析。下面是前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>案场助理个人中心-案场信息维护</title> <link rel="stylesheet" type="text/css" href="static/css/messageProtect.css" /> <link rel="stylesheet" type="text/css" href="static/css/reset.css" /> <link rel="stylesheet" type="text/css" href="static/lib/laydate/need/laydate.css" /> <script type="text/javascript" src="static/js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="static/lib/laydate/laydate.js"></script> <script src="static/js/city2.js"></script> <script type="text/javascript" src="static/js/citySelect2.js"></script> <script type="text/javascript" src="static/js/messageProtect.js"></script> <script type="text/javascript"> $(document).ready(function() { getAllHouseStyleData(); });  function getAllHouseStyleData(){ $.ajax({ type:"post", async:false, url:"list_all_house_type", success:function(data){ data = eval("("+data+")"); fillHouseStyleInfo(data.root); showDeleWindow(); updateHouseType(); } }); }  function fillHouseStyleInfo(data){ var s = "<tr><th>户型图</th><th>户型名称</th><th>面积</th><th>房型</th><th>户型说明</th><th>操作</th></tr>"; $.each(data,function(v,o){ s+='<tr><td><img src="'+o.photoURL+'" alt="" /></td>'; s+='<td><p>'+o.caption+'</p></td>'; s+= '<td><p>'+o.area+' ㎡</p></td>'; s+='<td><p>'+o.housType+'</p></td>'; s+='<td><p>'+o.housTypeDesc+' </p></td>'; s+='<td><input type="button" class="btn-change" value="修改" data-upvalue="'+o.houseTypeId+'" />'; if(o.isUse!="yes"){ s+='<input type="button" class="btn-cancel" value="删除" data-value="'+o.houseTypeId+'"/></td></tr>'; } }); if(data.length>0){ $("#houseStyleInfo").html(s); }else{ $("#houseStyleInfo").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>"); } } //删除选择弹框 function showDeleWindow(v){ $(".btn-cancel").click(function(){ var num = $(this).data("value"); $(".cancel-box").show(); enterDelte(num); }); } //删除后台ajax调用程序 function enterDelte(n){ $(".yes-btn").click(function(){ $.ajax({ type:"post", //async:false, url:"delete_house_type_byId", data:{hId:n}, success:function(data){ getAllHouseStyleData(); } }); //弹框关闭方法 agree(); }); } //修改户型信息 function updateHouseType(){ $(".btn-change").click(function(){ $.ajax({ type:"post", //async:false, url:"get_current_house_type", data:{hId:$(this).data("upvalue")}, success:function(data){ data = eval("("+data+")"); fillInForm(data.data); } }); }); } //显示修改信息 function fillInForm(data){ if(data.hasOwnProperty("houseTypeId")){ $("#newImg").attr('src',data.photoURL); $("#houseTypeId").val(data.houseTypeId); $("#imgUplode").val(data.photoURL); $("#caption").val(data.caption); $("#area").val(data.area); $("#housTypeDesc").val(data.housTypeDesc); var str = data.housType.split(" "); $(str).each(function(index){ if(this!=null && this!=""){ //alert(this.substring(1)); if(this.substring(1)=="房"){ $("#home").find("option[value="+this+"]").prop("selected",true); } if(this.substring(1)=="厅"){ $("#hall").find("option[value="+this+"]").prop("selected",true); } if(this.substring(1)=="卫"){ $("#toilet").find("option[value="+this+"]").prop("selected",true); } } }); } } </script> </head> <body>  <%@include file="publicHeader.jsp" %> <div class="container"> <div class="home-messageProtect"> <p>首页 - 案场信息维护</p> </div> <%@include file="basicSide.jsp" %>  <div class="main-content"> <div class="house-type"> <div class="add-house"> <button class="addBtn" id="addHouse">新增户型</button> </div> <div class="house-list"> <table id="houseStyleInfo" style="table-layout:fixed;">  </table> </div> </div> </div> </div> <div class="popCon"> <div class='close'></div> <form class='form-box' action='add_house_type' method="post" enctype="multipart/form-data"> <div class='form-div'> <label class='form-label'>户型图</label> <div class="up-pic"> <img src="" id="oldImg" > <span>+</span> <input type="file" id="oFile" onchange="oldFile()" name="pic" multiple="true" class="form-input file-pic"/> </div> </div> <div class='form-div'> <label class='form-label'>户型名称</label> <input class='form-input' type='text' name='caption' /> </div> <div class='form-div'> <label class='form-label'>面积</label> <input class='form-input' type='text' name='area' /> </div> <div class='form-div'> <label class='form-label'>房型</label> <select name='home'> <option value=''>房间数量</option> <option value='一房'>一房</option> <option value='两房'>两房</option> <option value='三房'>三房</option> <option value='四房'>四房</option> <option value='五房'>五房</option> <option value='六房'>六房</option> </select> <select name='hall'> <option value=''>厅数量</option> <option value='一厅'>一厅</option> <option value='两厅'>两厅</option> <option value='三厅'>三厅</option> <option value='四厅'>四厅</option> <option value='五厅'>五厅</option> <option value='六厅'>六厅</option> </select> <select name='toilet'> <option value=''>卫生间数量</option> <option value='一卫'>一卫</option> <option value='两卫'>两卫</option> <option value='三卫'>三卫</option> <option value='四卫'>四卫</option> <option value='五卫'>五卫</option> <option value='六卫'>六卫</option> </select> </div> <div class='form-div'> <label class='form-label'>户型说明</label> <textarea name='housTypeDesc' cols='50' rows='5'></textarea> </div> <div class='btn' style='margin:50px 200px 10px 150px;'> <input name="isSave" type='submit' class='btn1' value='保存' /> <input name="isSave" type='submit' class='btn2' value='保存并进入银行账号' /> </div> </form> </div>  <div class="popChange"> <div class='close'></div> <form class='form-box' action='add_house_type' method="post" enctype="multipart/form-data"> <div class='form-div'> <label class='form-label'>户型图</label> <div class="up-pic"> <img src="" id="newImg" > <span>+</span> <input type="file" id="nFile" onchange="newFile()" name="pic" multiple="true" class="form-input file-pic"/> <input type="hidden" id="houseTypeId" name="houseTypeId"> <input type="hidden" id="imgUplode" name="photoURL"> </div> </div> <div class='form-div'> <label class='form-label'>户型名称</label> <input class='form-input' type='text' name='caption' id="caption"/> </div> <div class='form-div'> <label class='form-label'>面积</label> <input class='form-input' type='text' name='area' id="area"/> </div> <div class='form-div'> <label class='form-label'>房型</label> <select name='home' id="home"> <option value=''>房间数量</option> <option value='一房'>一房</option> <option value='两房'>两房</option> <option value='三房'>三房</option> <option value='四房'>四房</option> <option value='五房'>五房</option> <option value='六房'>六房</option> </select> <select name='hall' id="hall"> <option value=''>厅数量</option> <option value='一厅'>一厅</option> <option value='两厅'>两厅</option> <option value='三厅'>三厅</option> <option value='四厅'>四厅</option> <option value='五厅'>五厅</option> <option value='六厅'>六厅</option> </select> <select name='toilet' id="toilet"> <option value=''>卫生间数量</option> <option value='一卫'>一卫</option> <option value='两卫'>两卫</option> <option value='三卫'>三卫</option> <option value='四卫'>四卫</option> <option value='五卫'>五卫</option> <option value='六卫'>六卫</option> </select> </div> <div class='form-div'> <label class='form-label'>户型说明</label> <textarea name='housTypeDesc' cols='50' rows='5' id="housTypeDesc"></textarea> </div> <div class='btn' style='margin:50px 120px 10px 230px;'> <input name="isSave" type='submit' class='btn1' value='保存' /> </div> </form> </div> <div class="cancel-box"> <div class="cancel-msg"> <p>你确定杨删除此条信息吗？</p> </div> <div class="cancel-sure"> <input type="button" value="是" class="yes-btn" /> <input type="button" value="否" class="no-btn" /> </div> </div> <div class="exchange-master"><span>@交易大师 2016</span></div> </body> <script type="text/javascript"> function changeFile() { var windowURL = window.URL || window.webkitURL; var loadImg = windowURL.createObjectURL(document.getElementById('file').files[0]); document.getElementById('img').setAttribute('src',loadImg); } </script> </html>

下面上后端的代码：

Controller层

/** *获取当前项目下的所有户型 */ @ResponseBody @RequestMapping("/list_all_house_type") public void allHouseTypesList() { // 获取session中的用户信息 User u = (User) this.request.getSession().getAttribute("userInfo"); // 获取持久化用户对象 User user = userService.findById(u.getUserId()); // 通过案场助理用户对象中对应的parentId记录的项目id关联银行账户的项目id，获取当前案场下的所有银行帐号 if (user.getParentId() != null && !user.getParentId().equals("")) { List<HouseType> houseTypeList = houseTypeService.findAllHouseType(u.getParentId()); if (houseTypeList != null) { this.outListString(houseTypeList); } } }

Service层：

@Resource(name="baseDao") private BaseDao baseDao; @Override public User findById(String id) { return (User) baseDao.loadById(User.class, id); }

DAO层：

/** 加载指定ID的持久化对象 */ public Object loadById(Class clazz, Serializable id) { return getHibernateTemplate().get(clazz, id); }

以上都是获取数据的部分，下面是提交数据的代码：

Controller：

@RequestMapping("/add_house_type") public String addHouseType(HouseType ht, MultipartFile pic,String home,String hall,String toilet, String isSave) throws IOException{ //获取登录用户信息 User u = (User) this.request.getSession().getAttribute("userInfo"); //获取持久化用户对象 User user = userService.findById(u.getUserId()); //户型值组合 ht.setHousType(home+" "+hall+" "+toilet); //执行添加户型业务逻辑 houseTypeService.addOrupdateHouseType(ht, user,pic); //页面跳转 if(isSave.equals("保存")){ return "redirect:/to_houseType"; }else{ return "redirect:/to_bankCount"; } }

Service：这个是文件上传的关键部分

@Override public void addOrupdateHouseType(HouseType ht, User u, MultipartFile pic) throws IOException { HouseType upHT = null; // 判断该户型id是否存在，若不存在就新增户型，若存在就更新当前户型信息 if (ht.getHouseTypeId() == null || ht.getHouseTypeId() == "") { ht.setHouseTypeId(SysContent.uuid()); } if (!pic.isEmpty() && pic.getSize() > 0) { String sepa = File.separator; ServletContext session = SysContent.getSession().getServletContext(); System.out.println(session); //sepa + "static" + sepa + String realPath = SysContent.getSession().getServletContext().getRealPath("/static/upload"); System.out.println(realPath); String rename = SysContent.getFileRename(pic.getOriginalFilename()); String rpn = realPath + sepa + rename; String savePath = rpn.substring(rpn.indexOf("static")); System.out.println(rpn); File file = new File(rpn); FileUtils.copyInputStreamToFile(pic.getInputStream(), file); ht.setPhotoURL(savePath); //上传文件备份 SysContent.backUploadPics(pic,rename); }else{ if(upHT!=null){ ht.setPhotoURL(upHT.getPhotoURL()); } } ht.setProjectId(u.getParentId()); //户型默认未启用 ht.setIsUse("no"); baseDao.saveOrUpdate(ht); }

以上

转载请注明原文地址: https://ju.6miu.com/read-9512.html

技术

最新回复(0)