ajax与文件上传

表单部分

<div class="avatar-add">
<-- 上传头像 -->
     <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
     <form id="headupload" action="#" method="post" enctype="multipart/form-data">
         <input type="file" name="headimg" style="width: 72px; position: relative;left: 150px;top: 30px;">
     </form>
     <img src="${pageContext.request.contextPath}/fly-3.0/res/images/avatar/${log_userinfo.headurl}">
     <span class="loading"></span>
</div>

ajax部分

$('#headupload').change(function () {
      // FormData这个对象能打包一个表单的所有数据
       let sendData = new FormData($('#headupload')[0]);
        $.ajax({
             url:'${pageContext.request.contextPath}/user/uploadHead',
             data:sendData,
             type : 'post',
             cache:false,//文件不设置缓存
             processData: false,//数据不被转换为字符串
             contentType: false,//上传文件时使用，避免 JQuery 对其操作
             dataType:"json",
             success:function (res) {
                 if(res == 0){
                       // 重新加载页面
                        location.reload();
                  }
                  if(res==1){
                     alert("不支持该格式");
                  }
             },
            error:function () {
                },
            async:true
      })
})

后台处理

    @RequestMapping("/uploadHead")//路径
    @ResponseBody//将返回值处理为json
//注意方法传的参数名字一定要与前台对应不然会报空值
    public int UserUploadHead(MultipartFile headimg, HttpServletRequest request) throws IOException {
//        文件上传
//        1.得到文件名字
//        2.给文件重命名
//        3.指定保存路径
//        4.上传

        String fileName=headimg.getOriginalFilename();
        UUID uuid=UUID.randomUUID();
        String newFileName=uuid+fileName;
        String path=request.getServletContext().getRealPath("/fly-3.0/res/images/avatar");
        File file1=new File(path);
        if (!file1.exists()){
            file1.mkdirs();
        }
        if(!fileName.endsWith(".jpg") && !fileName.endsWith(".png") &&  !fileName.endsWith(".gif") && !fileName.endsWith(".JPG") &&  !fileName.endsWith(".PNG") &&  !fileName.endsWith(".GIF")){
            return 1;
        }
        // 把文件写到指定路径
        String savePath=path+File.separator+newFileName;
        File finalPach=new File(savePath);
        headimg.transferTo(finalPach);
        System.out.println(finalPach);
        // 2.修改数据库xxxxxxx.jpg
        Userinfo log_userinfo = (Userinfo) request.getSession().getAttribute("log_userinfo");
        log_userinfo.setHeadurl(newFileName);
        System.out.println(newFileName+","+log_userinfo.getUid());
        userinfoService.uploadHeadImg(log_userinfo);
        return 0;