javaweb Servlet3 jquery实现ajax上传文件

说明

使用 Servlet3 实现上传文件,非常简单,不需要依赖第三方jar包

关键

  • 使用ajax实现上传,js有特殊写法:

    • 将数据封装到 FormData
    • 进行下面配置:
      contentType: false, // 关键
      processData: false, // 关键
      
  • servlet要用 @MultipartConfig 注解

代码

html

需要引入 jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link href="css/style.css" rel="stylesheet"/>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#sbmt").click(function (){
                /*
                 根据name获取控件的值
                 const:该变量不需要改变
                 */
                const username = $("#username").val()
                // 根据id获取控件的值(推荐)
                const password = $("#password").val()
                let ok = true
                if(username.trim() === ""){
                    $("#uname_warn").text("请输入用户名!")
                    ok = false
                }else{
                    $("#uname_warn").text("")
                }
                if(password.trim() === ""){
                    $("#pwd_warn").text("请输入密码!")
                    ok = false
                }else{
                    $("#pwd_warn").text("")
                }
                if(ok){
                    //通过jq让表单提交,因为上传文件,需要将数据封装到FormData对象中
                    var formData = new FormData();
                    formData.append("head",$("#head")[0].files[0])
                    formData.append("username",username)
                    formData.append("password",password)

                    $.ajax({
                        url:'/reg', /*接口域名地址*/
                        type:'post',
                        data: formData,
                        contentType: false, // 关键
                        processData: false, // 关键
                        dataType:'json',//服务器返回数据的类型
                        success:function(res){
                            if(res.code == 0){
                                location.href="login.html"
                            }else{
                                console.log("servlet返回数据:",res,typeof(res))
                                console.log("msg:",res.msg)
                                console.log("code:",res.code)
                                $("#msg").text("测试数据")
                                $("#msg").text(res.msg)
                                //测试123456
                            }
                        },
                        error:function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest);
                            alert(textStatus);
                            alert(errorThrown);
                        }
                    })
                }
            })
        })

    </script>
</head>
<body>
    <h1>注册页面</h1>
        <label for="username">登录名:</label>
        <input type="text" name="username" id="username" maxlength="8" >
        <span id="uname_warn" class="warn"></span>
        <br>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" maxlength="8">
        <span id="pwd_warn" class="warn"></span>
        <br>
        上传头像:<input type="file" name="head" id="head">
        <br>
        <input type="button" value="提交" id="sbmt">
        <input type="reset" >
        <div id="msg" class="warn"></div>
</body>
</html>

java

需要使用Jackson jar包

关键:servlet要用 @MultipartConfig 注解,否则上传失败

package com.sys.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.sys.entity.User;
import com.sys.exception.DuplicateNameException;
import com.sys.pojo.JsonResult;
import com.sys.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.UUID;

@WebServlet("/reg")
@MultipartConfig
public class RegistServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Part head = req.getPart("head");
        if(head!=null) {
            // 上传文件才执行下面代码
            if(head.getSubmittedFileName()!=null && !"".equals(head.getSubmittedFileName())) {
                // 在当前工程下创建upload文件夹
                // upload文件夹的绝对路径(全路径)
                String upload = req.getServletContext().getRealPath("/upload");
                File uploadFile = new File(upload);
                if (!uploadFile.exists()) {
                    // 创建文件夹
                    uploadFile.mkdirs();
                }

                String uuid = UUID.randomUUID().toString().replace("-", "");
                //截取文件后缀

                // 拼装,uuid+文件后缀

                // 拼装的是保存上传文件的全路径
                File file = new File(uploadFile, head.getSubmittedFileName());
                // 保存
                head.write(file.getAbsolutePath());

                //文件名称
                System.out.println(head.getSubmittedFileName());
                //文件大小
                System.out.println(head.getSize());
            }
        }

        // 通过request对象获取浏览器提交的参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        User user = new User();
        user.setUsername(username);
        user.setUpassword(password);

        UserService service = new UserService();
        PrintWriter writer = resp.getWriter();
        JsonResult jr = new JsonResult();

        try {
            service.regist(user);

            jr.setCode(0);
            jr.setMsg("注册成功!");
        } catch (DuplicateNameException e){
            jr.setCode(103);
            jr.setMsg(e.getMessage());
        } catch (Exception e) {
            jr.setCode(500);
            jr.setMsg("服务器发生错误");
            e.printStackTrace();
        }

        //将java对象,转换成 json 格式的字符串
        ObjectMapper om=new ObjectMapper();
        String json=om.writeValueAsString(jr);
        writer.write(json);
        writer.close();//关闭

    }
}

原文出处:https://malaoshi.top/show_1IX6EQ4LoUlw.html