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

SSM框架下使用Ajax实现头像更换

原创于 2021-09-27 08:37:10 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #tomcat #java-ee #java #eclipse

SSM文件上传之更换头像专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在SSM框架的JSP页面中利用Ajax技术进行头像更换。首先，需要在Tomcat服务器中配置本地文件路径，然后在Eclipse中配置服务器。接着，编写前端点击事件，配合后端Controller和Mapper层代码实现头像上传及替换功能。

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;
}