springMVC+ajax实现文件上传且带进度条实例

前端代码：

 

function doUpload() { 
   var formData = new FormData($( "#uploadForm" )[0]); 
   $.ajax({ 
     url: 'http://localhost:8080/xiaochangwei/file/upload' , 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processdata: false, 
     success: function (returndata) { 
alert(returndata); 
     }, 
     error: function (returndata) { 
alert(returndata); 
     } 
   }); 
}

后端：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
  public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model) {
    System.out.println("开始");
    String path = request.getSession().getServletContext().getRealPath("upload");
    String fileName = file.getOriginalFilename();
    // String fileName = new Date().getTime()+".jpg";
    System.out.println(path);
    File targetFile = new File(path, fileName);
    if (!targetFile.exists()) {
      targetFile.mkdirs();
    }

    // 保存
    try {
      file.transferTo(targetFile);
    } catch (Exception e) {
      e.printStackTrace();
    }
    model.addAttribute("fileUrl", request.getContextPath() + "/upload/" + fileName);
    return "result";
  }

如果前端有很多实体类数据同文件一同提交

可以修改后端方法为：

复制代码 代码如下:
upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)

利用下面的代码更可实现带有进度条的文件上传

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。