java mvc上传文件进度_java相关：springMVC+ajax实现文件上传且带进度条实例

java相关：springMVC+ajax实现文件上传且带进度条实例

发布于 2020-7-5|

复制链接

本篇文章主要介绍了springMVC+ajax实现文件上传且带进度条实例，具有一定的参考价值，有兴趣的可以了解一下。

前端代码：

```javascript

指定文件名：

上传文件：

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

}

});

}

```

后端：

```java

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

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

```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%");

}

}

}

```