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

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

<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>    <progress id="progressBar" value="0" max="100"></progress><form id= "uploadForm">  <input type="file" id="file" name="myfile" />  <input type="button" onclick="UpladFile()" value="上传" /></form>