Springboot⽂件上传（带进度条）1. 相关依赖 l
<project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.4.RELEASE</version>
</parent>
<groupId>io.gitee.liubin0509</groupId>
<artifactId>study</artifactId>
<version>0.0.1-SNAPSHOT</version>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
<groupId>dom4j</groupId>
<artifactId>dom4j</artifactId>
</dependency>
</dependencies>
</project>
2. 画⾯ upload.ftl
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<h1>Spring Boot file upload example</h1>
<form id="FileuploadForm" method="POST" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile" id="uploadFile"/><br />
<br /><input type="button" value="上传⽂件" onclick="upload()"/>
<div id="msg"></div>
setinterval是谁的方法
</form>
<!--进度条部分(默认隐藏)-->
<div class="progress-body">
<div>
<span >上传进度：</span>
<progress></progress><percentage>0%</percentage>
</div>
<div>
<span >上传速度：</span>
<span class="progress-speed">0 M/S, 0/0M</span>
</div>
<div>
<span >上传状态：</span>
<span class="progress-info">请选择⽂件并点击上传⽂件按钮</span> </div>
</div>
</body>
</html>
3, 上传ajax
<script>
// 上传⽂件
function upload(){
$("#msg").text("");
var checkFile = $("#uploadFile").val();
var msgInfo = "";
if(null==checkFile || ""==checkFile){
$("#msg").text("⽂件为空，请选择⽂件!");
}else{
var formData = new ElementById("FileuploadForm"));
$.ajax({
type: "POST",
enctype:'multipart/form-data',
url: '/upload',
data: formData,
cache:false,
processData:false,
contentType:false,
error:function(result){
console.log("error");
console.log(result);
flag = false;
$("#msg").text("访问服务器错误，请重试！");
},
success: function(result){
console.log("success");
},
xhr: function () {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//处理进度条的事件
xhr.upload.addEventListener("progress", progressHandle, false);
//加载完成的事件
xhr.addEventListener("load", completeHandle, false);
//加载出错的事件
xhr.addEventListener("error", failedHandle, false);
//加载取消的事件
xhr.addEventListener("abort", canceledHandle, false);
//开始显⽰进度条
showProgress();
return xhr;
}
}
}, 'json');
}
}
var start = 0;
//显⽰进度条的函数
function showProgress() {
start = new Date().getTime();
$(".progress-body").css("display", "block");
}
//隐藏进度条的函数
function hideProgress() {
$("#uploadFile").val('');
$('.progress-body .progress-speed').html("0 M/S, 0/0M");
$('.progress-body percentage').html("0%");
$('.progress-body .progress-info').html("请选择⽂件并点击上传⽂件按钮");
//$(".progress-body").css("display", "none");
}
//进度条更新
function progressHandle(e) {
$('.progress-body progress').attr({value: e.loaded, max: e.total});
var percent = e.loaded / e.total * 100;
var time = ((new Date().getTime() - start) / 1000).toFixed(3);
if(time == 0){
time = 1;
}
$('.progress-body .progress-speed').html(((e.loaded / 1024) / 1024 / time).toFixed(2) + "M/S, " + ((e.loaded / 1024) / 1024).toFixed(2) + "/" + ((e.total / 1024) / 1024).toFixed(2) + " MB. ");        $('.progress-body percentage').Fixed(2) + "%");
if (percent == 100) {
full是什么意思$('.progress-body .progress-info').html("上传完成，后台正在处理...");
} else {
$('.progress-body .progress-info').html("⽂件上传中...");
}
};
//上传完成处理函数
jquery下载文件进度条function completeHandle(e) {
$('.progress-body .progress-info').html("上传⽂件完成。");
setTimeout(hideProgress, 2000);
};
/
/上传出错处理函数
function failedHandle(e) {
$('.progress-body .progress-info').html("上传⽂件出错, 服务不可⽤或⽂件过⼤。");
};
//上传取消处理函数
function canceledHandle(e) {
$('.progress-body .progress-info').html("上传⽂件取消。");
};
</script>
4. css
<style type="text/css">
progress {
background-color: #56BE64;
}
progress::-webkit-progress-bar {
background: #ccc;
}
progress::-webkit-progress-value {
background: #56BE64;
}
percentage{
position: fixed;
left: 160px;
}
</style>
5. controller
package io.gitee.liubin0509.l;
import java.io.File;
import java.io.IOException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
xss远程功能import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import io.gitee.liubin0509.study.web.bean.InfoMsg;
@Controller
@RequestMapping("/upload")
public class UploadCtrl {
private static final String TMP_PATH = "e:/projects/tmp";
@RequestMapping(value = "", method = RequestMethod.GET)
public String fileUploadInit() {
// InfoMsg infoMsg = new InfoMsg();
return "upload";
}
@RequestMapping(value = "", method = RequestMethod.POST)
@ResponseBody
public InfoMsg fileUpload(@RequestParam("uploadFile") MultipartFile file) {
InfoMsg infoMsg = new InfoMsg();
if (file.isEmpty()) {
infoMsg.setCode("error");
infoMsg.setMsg("Please select a file to upload");
return infoMsg;
}
try {
File tmp = new File(TMP_PATH, OriginalFilename());
if(!ParentFile().exists()){
}
infoMsg.setCode("success");
infoMsg.setMsg("You successfully uploaded '" + OriginalFilename() + "'");        } catch (IOException e) {
infoMsg.setCode("error");
infoMsg.setMsg("Uploaded file failed");
}
return infoMsg;
}
}
6. springboot 配置
pom⽂件中引⽤不同版本的springboot，上传⽂件⼤⼩配置不⼀样
#sources.static-locations=classpath:/static/
plate-loader-path=classpath:/static/
# for SpringBoot 1.3.x or earlier
multipart.maxFileSize=300MB
setselectedindexmultipart.maxRequestSize=300MB
# Spring Boot 1.4.x and 1.5.x
spring.http.multipart.maxFileSize=300MB
卵巢癌图片
spring.http.multipart.maxRequestSize=300MB
#Spring Boot 2.x
spring.servlet.multipart.maxFileSize=300MB
spring.servlet.multipart.maxRequestSize=300MB
源码下载地址： gitee/liubin0509/spring-uploadfile

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。