ssm框架，jsp页面用ajax实现更换头像

关注

原创最新推荐文章于 2026-07-18 16:08:00 发布 1k 阅读 AI 写同款· GEO 优化 ›

基于javaweb+springboot的仿天猫商城系统(java+jsp+Springboot+SSM+mysql+maven) 基于javaweb+springboot的仿天猫商城系统(java+jsp+Springboot+SSM+mysql+maven) 一、项目介绍：迷你天猫商城是一个基于SSM框架的综合性B2C电商平台，需求设计主要参考天猫商城的购物流程：用户从注册开始，到完成登录，浏览商品，加入购物车，进行下单，确认收货，评价等一系列操作。作为模拟天猫商城系统的核心组成部分之一，采用SSM框架的天猫数据管理后台包含商品管理，订单管理，类别管理，用户管理和交易额统计等模块，实现了对整个商城的一站式管理和维护。二、项目运阅读详情

ssm框架，jsp页面用ajax实现更换头像

导包与配置：
1、在Tomcat中配置本地文件地址

在这里插入图片描述

</Host>
	<Context debug="0" docBase="D:\Desktop\SSM\files" path="/files" reloadable="true"/><Context docBase="Demo" path="/Demo" reloadable="true" source="org.eclipse.jst.jee.server:Demo"/>
</Host>

2、双击Tomcat服务器
在这里插入图片描述

步骤：
1、编写端代码

<div id="imgDiv" >
	<img alt="点击更换头像" src="/files/no.png" class="img-circle" width="60px" height="60px">
	<input style="display: none" type="file"  id="fileUpLoad">
</div>

2、设置点击事件

<script type="text/javascript">
	$('#imgDiv').click(function() {
		document.querySelector('#fileUpLoad').click();
		document.getElementById("fileUpLoad").addEventListener("change",function () {
	        console.log("change");
	        sub();
		});
	});
function sub(){//点击提交按钮事件
	
	var fileList = $('#fileUpLoad')[0].files;
	
	// 构建form数据
	var formFile = new FormData();
	formFile.append("action", "UploadPath");
	//把文件放入form对象中  
	formFile.append("files", fileList[0]);

	// ajax提交
	$.ajax({
		url : "http://localhost:8080/Demo/tx/upload",
		data : formFile,
		type : "POST",
		//dataType : "json",
		cache : false, //上传文件无需缓存
		processData : false, //用于对data参数进行序列化处理 这里必须false
		contentType : false, //必须
		success : function(result) {
			console.log(result);
			$('#imgDiv').children().remove();
			var img='<img alt="" src="/files/'+result+'">';
			$('#imgDiv').append(img);
		},
		error : function(result) {
			alert('上传失败');
		}
	});
};
</script>

3、编写Mapper层代码

private static final String ip="http://localhost";

@PostMapping("/uploadPic")
@ResponseBody
public String uploadPic(@RequestParam( value="files",required=false)MultipartFile fileList,HttpServletResponse response,HttpServletRequest request) throws IOException {
	User user1=(User) request.getSession().getAttribute("user");
	int userid=user1.getId();
	String url=ip + ":" + "8080" + "/Demo/files/";
	String picname = new String(fileList.getOriginalFilename().getBytes("ISO-8859-1"), "UTF-8");
    String returnString="/files/"+picname;
	String rootFilePath = System.getProperty("user.dir") +"/files/"+ picname;  //获取项目根目录地址
    FileUtil.writeBytes(fileList.getBytes(), rootFilePath);  //将文件写入对应地址中的文件夹
    int count=us.updPic(returnString, userid);
    return returnString;
}