使用jQuery的ajax提交图片信息

1 设置图片id（html）

首先，定义上传图片的id，根据上传文件的id获取图片信息：

 注：图片的id应该设置在input标签里面

 2 发送ajax请求（js）

var formData = new FormData();
formData.append("file", jQuery("#photo_input")[0].files[0]);
if(formData!=null){
  jQuery.ajax({
  url:"/user/photo",
  type:"POST",
  data:formData,
  contentType: false,
  processData: false,
  success:function(res){
      if(res.code==200&&res.data!=null){
         jQuery("#photo").attr("src",res.data);
      }
      else{
         alert("修改失败!"+res.data);
      }
 }
 });
}

参数说明：

• type：获取文件，必须使用"POST";
• processData：默认情况下为true，通过data选项传递进来的数据，如果是一个对象，都会出来转化成一个查询字符串，如果要发送不希望转换的信息，要设置为false;
• contentType:默认值：“application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 jQuery.ajax() 那么它必定会发送给服务器。

3 后端处理

  public AjaxResult photo(MultipartFile file, HttpServletRequest request){
        //从参数中获取用户
        Userinfo userinfo=SessionUtil.getUser(request);
        if(userinfo==null||userinfo.getUid()<=0){
            return AjaxResult.fail(-1,"请先登录");
        }
        //获取原来的文件名和后缀
        String originalFilename=file.getOriginalFilename();
        String ext = "."+ originalFilename.split("\\.")[1];
        //生成一个新的文件名（以防有重复的名字存在导致被覆盖）
        String uuid = UUID.randomUUID().toString().replace("-", "");
        String newName = uuid + ext;
        String path =imagepath+newName;//保存路径newName;
        try {
            file.transferTo(new File(path));
        } catch (IOException e) {
            e.printStackTrace();
        }
        String urlpath = "/image/"+newName;
        //将文件名更新到数据库中
        int result=userService.updatephoto(urlpath,userinfo.getUid());
        //将处理结果返回给前端
        return AjaxResult.succ(urlpath);
   }