项目搭建+图片(添加+图片)

一 : 添加的jsp页面

1.添加的文本框

图片的添加框有2个 :

① img标签

② input 标签给的是 file id也给file 绑定改变事件

java 复制代码

用户姓名: <input type="text"  id="userName"><br>
用户密码: <input type="text"  id="userPwd"><br>
用户状态: <input type="text"  id="userState"><br>
图片:  <img src="" alt="" height="150" width="100" id="imgUrl">
      <input type="file" id="file" onchange="showImg(this)"><br>
逻辑删除: <input type="text" id="userDel"><br>
入职时间: <input type="datetime-local" step="1" id="userTime"><br>

2.添加按钮

java 复制代码

<%--添加按钮--%>
<input type="button" value="添加" id="userAdd">

3.定义图片的方法

① : 取值

② : 创建图片阅读器

③ : 读取图片路径

④ : 加载图片路径

reader.οnlοad=function(){

⑤ : 给图片赋值

}

javascript 复制代码

/**
     * 图片
     */
    function showImg(obj) {
      //获取选中图片的路径
      let file = obj.files[0];
      //创建文件阅读器
      let reader = new FileReader();
      //读取图片路径
      reader.readAsDataURL(file)
      //加载图片路径
      reader.onload=function () {
        //给图片赋值
        $("#imgUrl").attr("src",reader.result)
      }
    }

4.给添加按钮绑定一个点击事件

① : 定义图片 let imgUrl="";

② : 创建 formData对象

③ : 获取选中的图片

④ : 将图片放到 formData中

⑤ : 图片的ajax

data : 给的是 formData

在图片的成功回调函数中将res的路径给图片

⑥ : 添加取值

⑦ : 判空

⑧ : 组装对象 (+上图片)

⑨ : 添加的ajax

添加的成功回调函数走200

javascript 复制代码

/**
     * 给添加按钮绑定一个点击事件
     */
    $("#userAdd").click(function () {
        let imgUrl="";
        //创建 formData 对象
        let formData = new FormData;
        //获取选中的图片
        let file = $("#file")[0].files[0];
        //将图片放到formData 中  formData.append("#file",file)
        formData.append("file",file);
        //图片的ajax
        $.ajax({
            url: "/file/upload",
            type: "post",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData:  false,
            dataType: "json",
            success(res) {
                imgUrl=res;
            },
            error() {
                alert("图片上传失败")
            }
        })
        //添加取值
        let userName=$("#userName").val()
        let userPwd=$("#userPwd").val()
        let userState=$("#userState").val()
        let userDel=$("#userDel").val()
        let userTime=$("#userTime").val()
        //判空
        if (
            !userName ||
            !userPwd ||
            !userState ||
            !userDel ||
            !userTime
        ){
            alert("请先输入")
        }
        //组装对象
        let obj={
            userName:userName,
            userPwd:userPwd,
            userState:userState,
            userDel:userDel,
            userTime:userTime,
            imgUrl:imgUrl
        }
        //添加的ajax
        $.ajax({
            url: "/user/userAdd",
            type: "post",
            data: {reqInfos:JSON.stringify(obj)},
            dataType: "json",
            success(res) {
                //打印
                console.log(res)
                //判断
                if (res===200){
                    alert("添加成功")
                    //跳转页面
                    location.href="list.jsp"
                }
            },
            error() {
                alert("添加失败")
            }
        })
    })

二 : Controller层

1.图片有单独的Controller 2个方法

one : 上传的图片方法

① : 调用图片的方法

② : 将处理后的结果响应给用户

javascript 复制代码

/**
     * 上传图片
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void upload(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //调用图片方法
        String image = UploadUtil.uploadImage(req, resp);
        //将处理后的结果响应给用户
        resp.getWriter().println(JSONObject.toJSONString(image));
    }

two : 展示图片的方法

① : 传参 (传图片的字段)

② : 使用工具类调用方法

javascript 复制代码

/**
     * 展示图片
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void showImg(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //传参
        String imgUrl = req.getParameter("imgUrl");
        //使用工具类调用方法
        UploadUtil.showImg(imgUrl,resp);
    }

2.Controller层

① : 接参

② : 将json的对象转换成java对象

③ : 将转换后的对象传给service (添加走 200)

④ : 将处理后的结果响应给用户

javascript 复制代码

/**
     * 用户表添加
     */
    protected void userAdd(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接参
        String reqInfos = req.getParameter("reqInfos");
        //将json对象转换成java对象
        User user = JSONObject.parseObject(reqInfos, User.class);
        //将转换后的对象传给service
        service.userAdd(user);
        //响应
        resp.getWriter().println(JSONObject.toJSONString(200));
    }

三 : service层

①.调用dao层对象,处理返回值

②.需要设置默认值的设置默认值

javascript 复制代码

/**
     * 用户表添加
     * @param user
     */
    @Override
    public void userAdd(User user) {
        //设置默认值
        user.setUserState(0);
        user.setUserDel(0);
        //调用dao层对象,处理返回值
         userDao.userAdd(user);
    }

四 : dao层

① : 定义sql

② : 打印sql

③ : 执行sql

javascript 复制代码

/**
     * 添加
     * @param user
     */
    @Override
    public void userAdd(User user) {
        //定义sql
        String sql="INSERT INTO t_user(user_name,user_pwd,user_state,img_url,user_del,user_time)VALUES(?,?,?,?,?,?)";
        //打印sql
        System.out.println(sql);
        //执行sql
        baseUpdate(sql,user.getUserName(),user.getUserPwd(),user.getUserState(),user.getImgUrl(),user.getUserDel(),user.getUserTime());
    }