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 (xhr, textStatus) {
                            alert('发生错误')
                            console.log(xhr.responseJSON) // json格式，ajax请求使用该对象
                        }
                    })
                }
            })
        })

</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();//关闭

}
}
```

原文出处：http://www.malaoshi.top/show_1IX6EQ4LoUlw.html