springMVC+ajax 文件上传带进度条-蒲公英云

springMVC+ajax 文件上传带进度条

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

前端代码：

复制代码

<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);  
          }  
     });  
}

复制代码

后端：

复制代码

@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)

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

复制代码

<script type="text/javascript">
        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
            var FileController = "http://localhost:8080/xiaochangwei/file/upload";                    // 接收上传文件的后台地址 
            // FormData 对象
            var form = new FormData($( "#uploadForm" )[0]);
            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("post", FileController, true);
            xhr.onload = function () {
               // alert("上传完成!");
            };
            xhr.upload.addEventListener("progress", progressFunction, false);
            xhr.send(form);
        }
        function progressFunction(evt) {
            var progressBar = document.getElementById("progressBar");
            var percentageDiv = document.getElementById("percentage");
            if (evt.lengthComputable) {
                progressBar.max = evt.total;
                progressBar.value = evt.loaded;
                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
                if(evt.loaded==evt.total){
                    alert("上传完成100%");
                }
            }
        }  
    </script>
    <br />
    <br />
    <br />
    <br />
    <progress id="progressBar" value="0" max="100"></progress>
    <span id="percentage"></span>
    <br />
    <br />
    <br />
    <br />
<form id= "uploadForm">
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" /> </form>