Spring Boot快速入门(实现修改头像功能)

这篇博客是基于上篇博客写的，如果不知道如何搭SpringBoot框架请关注我且查看上一篇博客。

项目地址:

https://github.com/yeyuqingcheng/personalTwo.git

那么亲们先看效果截图:

 

这里的数据都是动态获取的,然后还自己搞了个小东西，look

修改头像功能实现:

这里我先讲一下实现修改头像功能的逻辑。

１. 首先，是一个触发修改头像的超链接,然后给该超链接绑定打开文件上传的事件。

２. js校验文件上传的格式，如果不符合返回警告信息,符合的话就向后台发送请求文件上传。

3 . 后台文件上传的逻辑是改变数据库表中的属性值且将图片放入服务器中

4.  最后，返回上传图片是否成功，js判断返回值如果成功刷新界面，不成功发出警告信息。

个人信息表:

个人详细信息表:

userId用于绑定p_user的id;

1.绑定超链接的文件上传事件关键代码

$(document).ready(function() {
	//显示头像
    var picPath = document.getElementById("picPath").value;
    var queryImg = document.getElementById("queryImg");
    if (picPath == null || picPath == "") {
        $("#thisImage").html('');
    } else {
    	$("#thisImage").append(""+ 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.后台文件上传关键代码 

// 修改头像
	@RequestMapping(value = "/queryImg", method = RequestMethod.POST)
	@ResponseBody
	public Map 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 resultMap = new HashMap();
		if (flag) {
			resultMap.put("result", "true");
		} else {
			resultMap.put("result", "false");
		}
		return resultMap;
	}

功能实现的介绍到此结束了，敬请关注，如果觉得哪里有些不完善的地方可以在下面评论，博主会尽情解答的,谢谢!!!