Spring Boot上传文件（带进度条）
Spring Boot 上传文件（带进度条）#
配置文件
spring:
freemarker:
template-loader-path: classpath:/static/
##Spring Boot 2.x 配置上传文件大小
servlet:
multipart:
max-file-size: 500MB
max-request-size: 500MB
InfoMsg Bean##
public class InfoMsg {
private String code;
private String msg;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
Controller##
@Controller
@RequestMapping("/upload")
public class UploadController {
private static final String TMP_PATH = "D:/projects/tmp";
@GetMapping
public String fileUp() {
return "upload";
}
@ResponseBody
@PostMapping
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, file.getOriginalFilename());
if (!tmp.getParentFile().exists()) {
tmp.getParentFile().mkdirs();
}
String[] fileInfo = getFileInfo(tmp);
File orRenameFile = createOrRenameFile(tmp, fileInfo[0], fileInfo[1]);
if (tmp.renameTo(orRenameFile)) {
file.transferTo(orRenameFile);
}else {
file.transferTo(tmp);
}
infoMsg.setCode("success");
infoMsg.setMsg("You successfully upload" + file.getOriginalFilename());
} catch (IOException e) {
infoMsg.setCode("error");
infoMsg.setMsg("Uploaded file failed");
}
return infoMsg;
}
/**
* 创建或重命名文件
* ps：sss.jpg sss(1).jpg
* @param from
* @param toPrefix
* @param toSuffix
* @return
*/
public static File createOrRenameFile(File from, String toPrefix, String toSuffix) {
File directory = from.getParentFile();
if (!directory.exists()) {
if (directory.mkdir()) {
System.out.println("Created directory " + directory.getAbsolutePath());
}
}
File newFile = new File(directory, toPrefix + toSuffix);
for (int i = 1; newFile.exists() && i < Integer.MAX_VALUE; i++) {
newFile = new File(directory, toPrefix + "(" + i + ")" + toSuffix);
}
if (!from.renameTo(newFile)) {
System.out.println("Couldn't rename file to " + newFile.getAbsolutePath());
return from;
}
return newFile;
}
/**
* 获取File的 . 前后字串
* @param from
* @return
*/
public static String[] getFileInfo(File from) {
String fileName = from.getName();
int index = fileName.lastIndexOf(".");
String toPrefix = "";
String toSuffix = "";
if (index == -1) {
toPrefix = fileName;
} else {
toPrefix = fileName.substring(0, index);
toSuffix = fileName.substring(index, fileName.length());
}
return new String[]{toPrefix, toSuffix};
}
}
页面upload.ftl 使用的是freemarker##
<!DOCTYPE html>
<html>
<head>
<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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/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" id="btnUpload" value="上传文件" onclick="upload()"/>
<div id="msg"></div>
</form>
<!--进度条部分(默认隐藏)-->
<div style="display: none;" class="progress-body">
<div>
<span style="width: 100px; display: inline-block; text-align: right">上传进度：</span>
<progress></progress>
<percentage>0%</percentage>
</div>
<div>
<span style="width: 100px; display: inline-block; text-align: right">上传速度：</span>
<span style="width: 300px;" class="progress-speed">0 M/S, 0/0M</span>
</div>
<div>
<span style="width: 100px; display: inline-block; text-align: right">上传状态：</span>
<span style="width: 300px;" class="progress-info">请选择文件并点击上传文件按钮</span>
</div>
</div>
<script>
// 上传文件
function upload() {
$("#msg").text("");
var checkFile = $("#uploadFile").val();
var msgInfo = "";
if (null == checkFile || "" == checkFile) {
$("#msg").text("文件为空,请选择文件!");
} else {
var formData = new FormData(document.getElementById("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) {
$("#btnUpload").attr("disabled", true);
$("#uploadFile").attr("disabled", true);
//处理进度条的事件
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("请选择文件并点击上传文件按钮");
$("#btnUpload").attr("disabled", false);
$("#uploadFile").attr("disabled", false);
//$(".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').html(percent.toFixed(2) + "%");
if (percent == 100) {
$('.progress-body .progress-info').html("上传完成,后台正在处理...");
} else {
$('.progress-body .progress-info').html("文件上传中...");
}
};
//上传完成处理函数
function completeHandle(e) {
$('.progress-body .progress-info').html("上传文件完成。");
setTimeout(hideProgress, 2000);
};
//上传出错处理函数
function failedHandle(e) {
$('.progress-body .progress-info').html("上传文件出错, 服务不可用或文件过大。");
setTimeout(hideProgress, 2000);
};
//上传取消处理函数
function canceledHandle(e) {
$('.progress-body .progress-info').html("上传文件取消。");
setTimeout(hideProgress, 2000);
};
</script>
</body>
</html>
效果展示##
Spring Boot上传文件（带进度条）的更多相关文章
- Extjs 使用fileupload插件上传文件 带进度条显示
一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...
- asp.net mvc 实现上传文件带进度条
本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...
- FormData上传文件 带进度条
* jQuery ajax FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- java进行文件上传，带进度条
网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...
- springboot(十七)：使用Spring Boot上传文件
上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个Spring Boot上传文件的小案例. 1.pom包配置 我们使用Spring Boot最新版本1.5.9. ...
- （转）Spring Boot(十七)：使用 Spring Boot 上传文件
http://www.ityouknow.com/springboot/2018/01/12/spring-boot-upload-file.html 上传文件是互联网中常常应用的场景之一,最典型的情 ...
- 使用Spring Boot上传文件
原文:http://www.cnblogs.com/ityouknow/p/8298344.html 上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个Spri ...
- Spring Boot(十七)：使用 Spring Boot 上传文件
上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个 Spring Boot 上传文件的小案例. 1.pom 包配置 我们使用 Spring Boot 版本 ...
随机推荐
- Quartz.Net 任务调度
基于ASP.NET MVC(C#)和Quartz.Net组件实现的定时执行任务调度 在之前的文章<推荐一个简单.轻量.功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentSch ...
- 基层教师 - CMD命令之net命令与IPC连接
1)建立空连接: net use \\IP\ipc$ "" /user:"" (一定要注意:这一行命令中包含了3个空格) 2)建立非空连接: net use \ ...
- java 面向对象（四十三）：反射（七）反射应用四：动态代理
1.代理模式的原理:使用一个代理将对象包装起来, 然后用该代理对象取代原始对象.任何对原始对象的调用都要通过代理.代理对象决定是否以及何时将方法调用转到原始对象上. 2.静态代理2.1 举例:实现Ru ...
- How to install nginx in Ubuntu
The steps for installing the nginx on Ubuntu below. 1.install the packages first. apt-get install gc ...
- Hangfire实战(一)------Hangfire+SQL Server实现简单的任务调度
Hangfire:一个开源的任务调度框架 开发环境:VS2017,SQL Server 2012,.NET Framework 4.5 项目类型:控制台应用程序 1.在vs的程序包控制台中为项目添加H ...
- PDFtoWORD_V1.1版本支持PDF文档中的文字和图片一起转化到word文档中了~
昨天菜鸟小白做了一个小软件——PDFtoWORD,作用就是将pdf文件中的文字提取出来自动转化为可编辑的word类型.但是这个软件目前也只能将文件PDF中的文字提取出来,还无法提取图片.为了 ...
- Python 爬取 42 年高考数据，告诉你高考为什么这么难？
作者 | 徐麟 历年录取率 可能很多经历过高考的人都不知道高考的全称,高考实际上是普通高等学校招生全国统一考试的简称.从1977年国家恢复高考制度至今,高考经历了许多的改革,其中最为显著的变化就是录取 ...
- noi linux gedit 配置（c++环境）
基本配置 方法一 查看所有命令: gsettings list-recursively | grep -i gedit 命令解释 gsettings set org.gnome.gedit.prefe ...
- Vue全家桶之一Vue(基础知识篇)
全家桶:Vue本身.状态管理.路由. 异步组件:
- 技术干货：Ceph搭建硬件建议详解
Ceph是专为在商品硬件上运行而设计的,这使得构建和维护超大规模的数据集群在经济上是可行的.当规划出你的集群硬件时,你需要平衡一些考虑因素,包括故障域和潜在的性能问题.硬件规划应该包括将Ceph守护进 ...