博客

修改头像功能实现:

实现修改头像功能的逻辑。

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

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

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

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

前台jsp页面：

	<!--修改头像-->
		<div class="avatar">
			<div class="clearfix"><a href="#" class="fr gb"><img src="img/icon4.png"/></a></div>
			<input type="hidden" id="header" value="${loginedUser.header}" />			
			<h3>修改头像</h3>
			<div id="thisImage" style="width:150px;height:130px;border:1px solid #8E8E8E;
				position: relative;left:100px;top:30px">
				<img src="" style="width:150px;height:130px;">
			</div> 
			<form method="post" enctype="multipart/form-data">
			<p class="modify">
				<input type="file" class="file" id="file" /><a href="javascript:;"
					id="queryImg"></a>					
			</p>
		</form>			
		</div>

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

<script>
$(document).ready(function(){
	//显示头像
    var header = document.getElementById("header").value;
    var queryImg = document.getElementById("queryImg");
   	if (header == null || header == "") {
        $("#thisImage img").attr("src","/images/uploadimg.jpg");
    } else {
    	$("#thisImage img").attr("src","<%=basePath%>"+header);
     	<%-- $("#thisImage").append("<img width=\"130px\" height=\"100px\" class=\"head\" src=\"" + "<%=basePath%>"+ header + "\"  />"); --%>
	}
    //点击a触发头像上传
    $("#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 != '.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: "queryImg",
				data : formData,
				cache: false,
				contentType : false,
				processData : false,
				success : function(data) {
						if (data.result == "true") {
							$("#ti").attr("src", data.data);
				            $("#header").val(data.data);
							location.reload();
							alert("修改头像成功！");
						}
						if (data.result == "false") {
							alert("修改头像失败");
						}
					},
				error : function(data) { 
					alert("修改头像失败");
					}
				});           	
			}
		});
});
</script>

后台代码：

控制层：

/**
     * 修改头像
     * @param file
     * @return
     */
 	@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("/") + "images\\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) {
 			e.printStackTrace();
 		} catch (IOException e) {
 			e.printStackTrace();
 		}
 		// 将文件上传的路径给user对象
 		String header = "images/uploads/" + fileName;
 		//从session中拿出
 		User userSession = (User) session.getAttribute("loginedUser");
 		String username = userSession.getUsername();
 		boolean flag = ubiz.queryImg(username, header);
 		User byUid = ubiz.getByUid(userSession.getUid());
 		//重新存入到session,为了修改成功及时显示
 		session.setAttribute("loginedUser", byUid);
 		Map<String, Object> resultMap = new HashMap<String, Object>();
 		if (flag) {
 			resultMap.put("result", "true");
 		} else {
 			resultMap.put("result", "false");
 		}
 		return resultMap;
 	}