springMVC+ajax 文件上传带进度条

今天药忘吃喽~ 2022-05-30 09:30 302阅读 0赞

转自：https://www.cnblogs.com/xiaochangwei/p/5239104.html

前端代码：

![复制代码][copycode.gif]

<form id= "uploadForm">  
          <p >指定文件名： <input type="text" name="filename" value= ""/></p >  
          <p >上传文件： <input type="file" name="file"/></ p>  
          <input type="button" value="上传" οnclick="doUpload()" />  
    </form>  
    
    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);  
              }  
         });  
    }

![复制代码][copycode.gif]

后端：

![复制代码][copycode.gif]

@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";
        }

![复制代码][copycode.gif]

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

可以修改后端方法为：

upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)

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

![复制代码][copycode.gif]

[copycode.gif]: /images/20220530/cbb7af40f8cf40dca68a31f562c1141a.png