Ajax解决异步表单（包含文件上传）提交

不包含文件的表单

1.前端

<form id="form1">
    <input type="text" name="id"><br>
    <input type="text" name="name"><br>
    <input type="text" name="note"><br>
</form>
<button onclick="send()">提交表单</button>
<script type="text/javaScript">
    function send() {
        var dat = $("#form1").serialize();//将表单数据序列化
        alert(dat);
        $.ajax({
            url: "/testForm",//提交地址
            data:dat,
            type: "post",
            // dataType: "json",
            contentType:"application/x-www-form-urlencoded; charset=utf-8",
            success: function (result) {
                alert(result);
            },
            error: function () {
                alert("发送失败");
            }
        });
    }
</script>

2.控制器

    @RequestMapping("/testForm")
    public void testForm(HttpServletResponse response,User user) throws IOException {
        System.out.println(user);
//        ObjectMapper objectMapper=new ObjectMapper();
//        objectMapper.writeValueAsString(user);

        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(user);
    }

包含文件的表单

1.前端

<form id="form1" enctype="multipart/form-data" method="post">
    <input type="file" name="myFile" >
</form>
<button onclick="toSubmit()">确认上传</button>

    <div id="toShowImg"></div>
    <script type="text/javascript">
    function toSubmit() {
        var formData = new FormData(document.getElementById("form1"));
        var d=document.getElementById("toShowImg");
        alert("确认上传该文件?");
        $.ajax({
            url:"/upload",
            type : "post",
            data: formData,
            processData: false,// 不加会报错
            contentType: false,//避免对发送到服务器上数据类型重复操作
            // dataType : "json",//预期服务器返回的数据类型
            success :function (data) {
                $("#toShowImg").append("<img src='"+data +"'/>");
                alert(data);
            }
        });
    }
</script>

 

2.控制器

@Controller
public class FIleUploadController {

    @RequestMapping("/upload")
    public  void  upload(@RequestParam("myFile") MultipartFile file, HttpServletResponse response){
        System.out.println("fileName:"+file.getOriginalFilename());
        //获取文件名
        String fileName=file.getOriginalFilename();
        //获取后缀
//        String  suffixName=fileName.substring(fileName.lastIndexOf("."));
//      System.out.println("文件后缀名："+suffixName);
        //文件上传路径
//        String path="D://upload/";
//        fileName=path+ UUID.randomUUID()+suffixName;//中间加上随机数，上传同样名称的文件也不会覆盖
        //创建文件对象
//        File f=new File(fileName);
//        if(!f.getParentFile().exists()){//如果父目录不存在，则创建
//            f.mkdirs();
//        }
//        try {
//            file.transferTo(f);
//            response.setContentType("text/html;charset=UTF-8");
//            response.getWriter().print(fileName);
//            System.out.println("上传完成...");
//        } catch (IOException e) {
//            e.printStackTrace();
//        }

        // 存放上传图片的文件夹
        File fileDir = UploadUtils.getImgDirFile();
        // 输出文件夹绝对路径  -- 这里的绝对路径是相当于当前项目的路径而不是“容器”路径
        System.out.println(fileDir.getAbsolutePath());
        try {
            // 构建真实的文件路径
            File newFile = new File(fileDir.getAbsolutePath() + File.separator + fileName);
            System.out.println(newFile.getAbsolutePath());

            // 上传图片到 -》 “绝对路径”
            file.transferTo(newFile);
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().print("http://localhost:8080"+UploadUtils.IMG_PATH_PREFIX+File.separator+fileName);
            System.out.println("上传完成...");

        } catch (IOException e) {
            e.printStackTrace();
        }


    }