表单的异步提交

普通流程

$(’#myForm’).serialize() : 将表单的参数序列化成一个标准的application/x-www-form-urlencoded 格式

<script>
     $.ajax({
        url : "user",
        type: "POST",
         // 将表单的所有加了name属性input的属性对拼接成一个字符串
        data : $('#myForm').serialize(),  
		dataType: "text",
        success : function(text){
             if(text == "ok"){
                     $('#loginModal').modal('show');
                            // $('#loginModal').modal('hide');
              }
         }
	})
</script>

文件上传流程

<form id="myForm">
    <input type="hidden" name="m" value="userImg">
    用户名：
    <input type="text" name="username"> <br>
    文件：
    <input type="file" name="myFile">
    <button type="button" id="btn">开始上传</button>
</form>

<script>
        $(function () {
            // 给按钮绑定一个点击事件
            $('#btn').click(function () {
                $.ajax({
                    url: "upload",
                    type: "post",
                    data : new FormData($('#myForm')[0]),
                    contentType: false,
                    processData: false,
                    dataType : "text",
                    success: function (path) {
                        $('#showBox').html("<img src='"+path+"' width='100'>");
                    }
                })
            })
        });

    </script>

必须要配置的数据

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲myForm')[0] ： 将(’#myForm’)获取的jQuery对象转成JS对象

data : new FormData($(’#myForm’)[0]),
contentType: false,
processData: false,

Servlet的写法

@MultipartConfig
@WebServlet("/upload")
public class FileUploadServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    public void userImg(HttpServletRequest req, HttpServletResponse resp) throws Exception{
        String username = req.getParameter("username");
        System.out.println(username);

        // 后端的文件上传
        Part part = req.getPart("myFile");
        String fileName = part.getSubmittedFileName();

        String nginxPath = "E:/MyPrograme/nginx-1.18.0/html/upload/"+username;
        File file = new File(nginxPath);
        if(!file.exists()){
            file.mkdirs(); //创建用户文件夹
        }
        nginxPath = nginxPath+"/"+fileName;
        part.write(nginxPath);

        // 返回响应
        String path = "http://localhost/upload/"+username+"/"+fileName;
        resp.getWriter().write(path);
    }
}