AJAX+JQuery+SpringMVC实现图片上传

    xiaoxiao2021-03-25  99

    利用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(); } }); } <!-- 遍历数据库返回json字符串,并展示在html页面上 --> 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> <!-- <div class="header"> <a href="###" class="self-center">案场助理个人中心</a> <ul> <li><a href="###">首页</a></li> <li><a href="###">案场信息维护</a></li> <li><a href="###">价格优惠条款</a></li> <li><a href="###">房源管理</a></li> <li><a href="###">上下架管理</a></li> <li><a href="###">客户管理</a></li> <li><a href="###">成交业务</a></li> <li><a href="###">账号管理</a></li> </ul> <a href="###" class="welcome">欢迎您,某某某</a> </div> --> <%@include file="publicHeader.jsp" %> <div class="container"> <div class="home-messageProtect"> <p>首页 - 案场信息维护</p> </div> <%@include file="basicSide.jsp" %> <!-- <div class="side-bar"> <ul> <li><a href="">基本信息</a></li> <li><a href="">效果图</a></li> <li><a href="" style="color:#199ed8">户型</a></li> <li><a href="">银行账号</a></li> <li><a href="">带看业务定义</a></li> <li><a href="">预售证管理</a></li> <li><a href="">认购规则</a></li> </ul> </div> --> <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;"> <!-- <tr> <th>户型图</th> <th>户型名称</th> <th>面积</th> <th>房型</th> <th>户型说明</th> <th>操作</th> </tr> <tr> <td> <img src="" alt="" /> </td> <td> <p>A3(两室一厅一卫)</p> </td> <td> <p>三房一厅两卫</p> </td> <td> <p>89m²</p> </td> <td> <p>说明说明说明说明 说明说明说明说明 说明说明说明说明 说明说明 </p> </td> <td> <input type="button" class="btn-change" value="修改" /> <input type="button" class="btn-cancel" value="删除" /> </td> </tr> --> </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)