updateImg.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="static/layui/css/layui.css" />
</head>
<body>
<img id="userImg" style="width:160px;height:160px;" onerror="javascript:this.src='static/img/upload.png';" src="${user.img}"/><br><br>
<button id="submitBtn" class="layui-btn" style="width: 200px">确认</button>
<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['upload','layer','jquery'],function(){
var upload = layui.upload;
var layer = layui.layer;
var $ = layui.jquery;
//初始化文件上传组件
upload.render({
elem:"#userImg",//绑定图片上传的容器
//url:"user?service=updateImg",// 图片上传的接口
url:"user",
data:{'service':"updateImg"},
auto:false,// 取消自动提交
bindAction:"#submitBtn",//确认上传按钮
field:"userImg",//上传的图片part名称
choose:function(obj){
//实现图片预览
obj.preview(function(index,file,base64){
$("#userImg").attr("src",base64);
});
},
done:function(rs,index,upload){
if(rs.code == 200){
layer.msg("修改成功");
// 修改main.jsp页面上的图片
var imgUrl = rs.data;
alert(imgUrl)
// $("#img").prop("src",imgUrl);
window.parent.document.getElementById("img").src=imgUrl;
return false;
}
layer.msg("修改图像失败");
},
error:function(index, upload){
layer.msg("修改图像失败");
}
});
});
</script>
</body>
</html>
UserServlet:
@WebServlet("/user")
@MultipartConfig //这个注解必须要加,否则上传头像会报错
public class UserServlet extends HttpServlet {
UserService userService=new UserServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String service = req.getParameter("service");
try {
this.getClass().getDeclaredMethod(service,HttpServletRequest.class,HttpServletResponse.class).invoke(this,req,resp);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 头像上传
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void updateImg(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = (User) req.getSession().getAttribute("user");
//1.根据前台field,获取上传的图片
Part part = req.getPart("userImg");//内部保存了被上传文件的信息
//2.获取头部信息(包含被上传文件的文件名)
String header = part.getHeader("Content-Disposition");
//3.从头部信息取出被上传文件名
String str=header.substring(header.lastIndexOf("=")+2);
String filename=str.substring(0,str.length()-1);
//4.将文件上传到当前工程upload文件夹
String realPath=req.getServletContext().getRealPath("upload");
File file = new File(realPath);
if (!file.exists()){
file.mkdirs();
}
String path=realPath+"\\"+filename;
part.write(path);
//5.获取被上传图片的路径
String imgUrl="upload/"+filename;//upload/xxx.png
//调用业务层
JsonData jsonData=userService.updateImg(imgUrl,user.getId());
jsonData.setData(imgUrl);
//写入页面
PrintJsonData.print(resp,jsonData);
}
业务层:
public class UserServiceImpl implements UserService {
UserDao userDao = new UserDaoImpl();
public JsonData updateImg(String imgUrl, Integer id) {
boolean b = userDao.updateImg(imgUrl, id);
if (b) {
return JsonData.buildSuc("头像上传成功");
} else {
return JsonData.buildError("头像上传失败");
}
}
}
持久层:
public class UserDaoImpl extends BaseDao implements UserDao {
public boolean updateImg(String imgUrl, Integer id) {
String sql="update t_user set img=? where id=?";
return super.update(sql,imgUrl,id);
}
}
效果展示:
修改前(图片预览)
修改后
相关工具类,在上一篇《登录+验证码(maven+servlet实现)》已经写到,请参考:
版权声明:本文为IT_LD原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。