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

时间:2022-01-11 10:23:36

前端代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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);
     }
   });
}

后端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@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)

 

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://www.cnblogs.com/xiaochangwei/p/5239104.html