Spring Boot快速入门(实现修改头像功能)
2019-05-30 17:52
447 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36391380/article/details/90691843
这篇博客是基于上篇博客写的,如果不知道如何搭SpringBoot框架请关注我且查看上一篇博客。
项目地址:
https://github.com/yeyuqingcheng/personalTwo.git
那么亲们先看效果截图:
这里的数据都是动态获取的,然后还自己搞了个小东西,look
修改头像功能实现:
这里我先讲一下实现修改头像功能的逻辑。
1. 首先,是一个触发修改头像的超链接,然后给该超链接绑定打开文件上传的事件。
2. js校验文件上传的格式,如果不符合返回警告信息,符合的话就向后台发送请求文件上传。
3 . 后台文件上传的逻辑是改变数据库表中的属性值且将图片放入服务器中
4. 最后,返回上传图片是否成功,js判断返回值如果成功刷新界面,不成功发出警告信息。
个人信息表:
个人详细信息表:
userId用于绑定p_user的id;
1.绑定超链接的文件上传事件关键代码
[code]$(document).ready(function() { //显示头像 var picPath = document.getElementById("picPath").value; var queryImg = document.getElementById("queryImg"); if (picPath == null || picPath == "") { $("#thisImage").html(''); } else { $("#thisImage").append("<img class=\"head\" src=\"" + "<%=basePath%>"+ picPath + "\"/>"); } //点击超链接触发头像上传 $("#queryImg").bind("click",function(){ if($("#file").click()){ if($("#file").val()==''||$("#file").val()==null){ $("#file").change(); } } }); //头像上传 $("#file").change(function() { var animateimg = $("#file").val(); //获取上传的图片路径 var imgarr = animateimg.split('\\'); //分割 var myimg = imgarr[imgarr.length - 1]; //去掉 // 获取图片名 var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置 var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取文件后缀 var file = $('#file').get(0).files[0]; //获取上传的文件 var fileSize = file.size; //获取上传的文件大小 var maxSize = 1048576; if (ext != '.PNG' && ext != '.GIF' && ext != '.JPG' && ext != '.JPEG' && ext != '.BMP') { alert('文件类型错误,请上传图片类型'); return false; } else if (parseInt(fileSize) >= parseInt(maxSize)) { alert('上传的文件不能超过1MB'); return false; } else { //上传请求 var formData = new FormData(); formData.append("file", file); $.ajax({ type: "POST", //请求类型 url: "<%=basePath%>queryImg", data : formData, //请求参数 contentType : false, processData : false, //这个很有必要,不然不行 success : function( data) { if (data.result == "true") { location .reload(); } if (data.result == "false") { alert("亲,修改头像失败了"); } }, error : function( data) { //当访问时候,404,500 等非200的错误状态码 alert("亲,修改头像失败了"); } }); } }); });
2.后台文件上传关键代码
[code]// 修改头像 @RequestMapping(value = "/queryImg", method = RequestMethod.POST) @ResponseBody public Map<String, Object> queryImg(HttpServletRequest request, HttpSession session, @RequestParam(value = "file", required = false) MultipartFile file) { String path = request.getServletContext().getRealPath("/") + "static\\uploads\\"; File uploads = new File(path); // 如果文件夹不存在则创建 if (!uploads.exists() && !uploads.isDirectory()) { uploads.mkdirs(); } String locPath = ""; String fileName = file.getOriginalFilename(); File newfile = new File(path, fileName); try { file.transferTo(newfile); locPath = path + fileName; } catch (IllegalStateException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } // 将文件上传的路径给user对象 String picPath = "static/uploads/" + fileName; User userSession = (User) session.getAttribute(Constants.USER_SESSION); String userName = userSession.getUserName(); boolean flag = userService.queryImg(userName, picPath, locPath); Map<String, Object> resultMap = new HashMap<String, Object>(); if (flag) { resultMap.put("result", "true"); } else { resultMap.put("result", "false"); } return resultMap; }
功能实现的介绍到此结束了,敬请关注,如果觉得哪里有些不完善的地方可以在下面评论,博主会尽情解答的,谢谢!!!
相关文章推荐
- 10小时入门java开发04 springboot+freemarker+bootstrap快速实现分页功能
- 基于SpringBoot从零构建博客网站 - 设计可扩展上传模块和开发修改头像密码功能
- Spring Boot入门(12)实现页面访问量统计功能
- 使用SpringBoot快速实现接口测试
- Spring Boot 快速入门
- SpringBoot+Shiro学习之“记住我”和“GIF验证码”功能的实现
- 快速构建Spring boot项目(功能是检测访问页面的设备)
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
- SpringBoot快速入门(非maven)
- springboot入门,简单能跑的项目快速搭建
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
- springMVC+jcrop实现头像上传截图功能
- Spring Cloud 3:Spring Boot快速入门
- Spring 2.0+ JRuby 快速入门五(其它支持功能)
- 详解SpringBoot中实现依赖注入功能
- Spring Boot实现邮件注册功能示例代码
- Spring Boot / Spring MVC 入门实践 (三) : 入门项目介绍与用户注册登录的实现
- Spring Boot 快速入门
- SpringBoot + Thymeleaf实现邮件发送功能
- (Spring Boot框架)快速入门