上传头像(maven+servlet实现)

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实现)》已经写到,请参考:

https://blog.csdn.net/IT_LD/article/details/107819296


版权声明:本文为IT_LD原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。