Springboot上传文件&显示进度条

最新推荐文章于 2023-12-15 17:22:10 发布
最新推荐文章于 2023-12-15 17:22:10 发布
阅读量4.1k 收藏 11
点赞数 3
分类专栏： java杂记 文章标签： java文件上传 文件上传显示进度条 java上传文件 springboot上传显示进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37936542/article/details/103879341
版权

 

Step One 引入依赖

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.4</version>
</dependency>

 

Step Two 配置文件解析对象

@Bean(name="multipartResolver")
public MultipartResolver multipartResolver(){
	return new CommonsMultipartResolver();
}

 

Step Three  jsp兼样式

<style type="text/css">
#progressBar {
	width: 300px;
	height: 20px;
	border: 1px #EEE solid;
}

#progress {
	width: 0%;
	height: 20px;
	background-color: lime;
}

.form {
	margin: 10px 345px;
}
</style>

<body>
	<div class="modal-body form ">
		<form id="dialogForm" class="form-horizontal">
			<div class="form-group">
				<label class="col-md-3 col-sm-3  col-xs-3 control-label">版本号:
				</label>
				<div class="col-md-7 col-sm-7  col-xs-7">
					<input type="text" class="form-control " placeholder="请输入版本号"
						id="version">
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-3 col-sm-3 col-xs-3 control-label">部门:
				</label>
				<div class="col-md-7 col-sm-7  col-xs-7">
					<input type="file" name="file" id="file" onchange="upload()">
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-3 col-sm-3  col-xs-3 control-label">上传进度:
				</label>
				<div class="col-md-7 col-sm-7  col-xs-7">
					<!--进度条部分(默认隐藏)-->
					<div class="progress-body">
						<span style="display: inline-block; text-align: right"></span>
						<progress></progress>
						<percentage>0%</percentage>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-3 col-sm-3  col-xs-3 control-label">版本修改内容:
				</label>
				<div class="col-md-7 col-sm-7  col-xs-7">
					<textarea rows="3" cols="47" id="description"></textarea>
				</div>
			</div>
		</form>
		<div class="modal-footer">
			<button type="button" class="btn blue" id="addBtn"
				style="background: #11C2EE; color: #fff">提交</button>
		</div>
	</div>

	<input type="text" hidden="true" id="appUrl">
</body>

Step four  js(需引入jquery)

function upload() {
		// 验证文件内容
		var file = $("#file")[0].files[0];
		if (!file.name.endWith(".apk")) {
			alert("请选择.apk文件");
			return;
		}
		// 上传
		doIt()
	}

	function doIt() {
		var formData = new FormData();
		formData.append("file", $("#file")[0].files[0]);
		$.ajax({
			contentType : "multipart/form-data",
			url : "/mote/app/upload.action",
			type : "POST",
			data : formData,
			processData : false, // 告诉jQuery不要去处理发送的数据 
			contentType : false, // 告诉jQuery不要去设置Content-Type请求头 
			success : function(data) {
				$("#appUrl").val(data); // 保存文件路径
			},
			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);
					return xhr;
				}
			}
		});
	}

	//进度条更新 
	function progressHandle(e) {
		$('.progress-body progress').attr({
			value : e.loaded,
			max : e.total
		});
		var percent = e.loaded / e.total * 100;
		$('.progress-body percentage').html(percent.toFixed(2) + "%");
	};
	//上传完成处理函数 
	function completeHandle(e) {
		console.log("上传完成");
	};
	//上传出错处理函数 
	function failedHandle(e) {
		console.log("上传失败");
	};

	String.prototype.endWith = function(endStr) {
		var d = this.length - endStr.length;
		return (d >= 0 && this.lastIndexOf(endStr) == d)
	}

	// 添加内容
	$("#addBtn").click(function() {
		var params = {
			version : $("#version").val(),
			url : $("#appUrl").val(),
			description : $("#description").val()
		}

		$.ajax({
			url : "/mote/app/add.action",
			data : JSON.stringify(params),
			type : "POST",
			contentType : "application/json",
			success : function(data) {
				if (data == -1)
					alert("该版本已存在")
				if (data == 1)
					alert("上传成功")
			},
			error : function(data) {
				alert("服务器繁忙");
			}
		});

	});

 

Step five Controller代码

@PostMapping("/upload")
	@ResponseBody
	public ResponseEntity<String> fileUpload(
			@RequestParam("file") MultipartFile file, HttpServletRequest request) {

		// 判断文件是否有内容
		if (file.isEmpty())
			return new ResponseEntity<String>(Constant.isEmpty, HttpStatus.OK);

		try {
			// 获取文件名称
			String fileName = file.getOriginalFilename();

			// 定义上传路径
			// System.getProperty("file.separator") 根据系统获取分隔符
			String path = request.getSession().getServletContext()
					.getRealPath("");
			String contextPath = request.getContextPath();
			path = path.replace(contextPath.substring(1), "") + "apkDir"
					+ System.getProperty("file.separator") + fileName;

			// 根据文件的全路径名字(含路径、后缀),new一个File对象dest
			File dest = new File(path);
			// 如果该文件的上级文件夹不存在，则创建
			if (!dest.getParentFile().exists()) {
				dest.getParentFile().mkdirs();
			}

			// 向指定路径写入文件
			file.transferTo(dest);
			// 返回文件访问路径
			String url = request.getScheme() + "://" + request.getServerName()
					+ ":" + request.getServerPort() + "/apkDir/" + fileName;
			return new ResponseEntity<String>(url, HttpStatus.OK);
		} catch (Exception e) {
			log.info("文件上传失败" + e);
		}
		return new ResponseEntity<String>(Constant.upload_fail, HttpStatus.OK);
	}

	@PostMapping("/add")
	@ResponseBody
	public ResponseEntity<Integer> addV(@RequestBody App app) {
		try {

			// 验证版本是否存在
			int count = uploadService.getApp(app.getVersion());
			if (count > Constant.ZERO)
				return new ResponseEntity<Integer>(Constant.ERROR,
						HttpStatus.OK);
			// 设置时间
			app.setTimestamp(new Date().getTime());

			int numb = uploadService.addV(app);
			if (numb == Constant.ONE)
				return new ResponseEntity<Integer>(Constant.OK, HttpStatus.OK);

		} catch (Exception e) {
			log.info("添加app失败！！！" + e);
		}
		return new ResponseEntity<Integer>(HttpStatus.INTERNAL_SERVER_ERROR);
	}

附录 Constant类

public class Constant {
	
	public static final int OK = 1;
	
	public static final int ERROR = -1;
	
	public static final int ZERO = 0;
	
	public static final int ONE = 1;
	
	public static final int TWO = 2;
	
	public static final int THREE = 3;
	
	public static final String isEmpty = "0";
	
	public static final String isExit = "-2";
	
	public static final String upload_fail = "-1";

}

记录用的 写的不是很用心，有问题的请留言，谢谢

 

 

 

 

 

 

 

fly_鸡肉
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot文件上传和图片显示
weixin_49983206的博客
06-01 763
SpringBoot默认将静态资源映射到resources目录下的public、resources、static等目录。 如果是web静态资源例如html、css、js、网站插图等静态资源，是可以放在这些目录下的。对于用户上传来的文件，放在resources目录下是有问题的。如果程序是以jar包形式运行的话，总不能每次发布打包都要把用户上传的文件也一并打进jar吧？这显然不是一个好方法 这个时候可以去配置一个外部的虚拟路径需要的东西:Thymeleaf模板,IDEA和ctrl+C,这里使用的是Thymele
Springboot上传文件
qq_39015168的博客
11-18 314
Controler层里面代码内容 @RequestMapping(value="/uploadImg", method=RequestMethod.POST) @ResponseBody public String uploadImgController(@RequestParam(value="img")MultipartFile img){ File f = new File("/im...
SpringBoot 获取文件上传进度 实现进度条 （支持并发！！！）已修改項目实测
weixin_51439775的博客
12-10 1899
2.由于spring 中的 CommonsMultipartResolver 类中并没有加入 processListener 文件上传进度监听器，所以，直接使用 CommonsMultipartResolver 类是无法监听文件上传进度的，如果我们需要获取文件上传进度，就需要继承 CommonsMultipartResolver 类并重写 parseRequest 方法，在此之前，我们需要创建一个实现了 processListener 接口的实现类用于监听文件上传进度。
multi-file-uploader:使用 Spring Boot 实现多文件上传下载带进度条
06-26
多文件上传器 使用 Spring Boot 实现带进度条的多文件上传/下载 您可以使用 mvn spring-boot:run 运行应用程序
如何使用Springboot实现文件上传和下载，并为其添加实时进度条的功能
网络技术联盟站
06-03 2402
文件上传和下载是Web开发中非常基础的功能，但在实际开发中，我们经常需要实时显示文件上传或下载的进度。这篇文章将介绍如何使用Springboot实现文件上传和下载，并为其添加实时进度条的功能。
SpringMVC实现的文件上传进度条Bootstrap展示
程高伟
07-05 2万+
SpringMVC实现的文件上传进度条Bootstrap展示
springboot：实现文件上传下载实时进度条功能【附带源码】
55555的博客
10-23 1万+
记得刚入行的时候，做了一个文件上传的功能，因为上传时间较久，为了用户友好性，想要添加一个实时进度条，显示进度。奈何当时技术有限，查了许久也没用找到解决方案，最后不了了之。 近来偶然想到这个问题，于是决定整理一下实现方式，也为和我曾经一样碰壁的同学，提供一些思路。
spring文件上传真实进度条实现，多种上传
01-03
用springmvc的框架，实现了文件的上传，真实进度条的显示，多种上传方式选择一种，总有一种适合。jar包也都在工程里，是maven项目。访问http://localhost:8110/SpringMVCFileUpload/up3.jsp，或者同目录下的其他jsp，都可实现，随意选一种吧
带进度条文件上传springboot+vue+axios+mint-ui
07-27
springboot开发服务后台，提供文件上传接口，vue.js搭建前端项目，mint-ui做为UI界面，axios与后端服务接口交互，axios可实时监控文件上传进度，通过mint-ui实时展示当前文件上传进度
springboot+websocket进度条实战
11-11
`ProgressService`中的`sendProgressUpdate`方法可能会被业务逻辑调用，例如在执行耗时操作（如文件上传或大数据处理）时，根据任务的进度调用此方法，将进度信息推送到前端，从而在用户界面上动态更新进度条。...
进度条显示导出文件进度
07-24
文件导出时进度条显示其导出的进度。利用委托和事件，使窗体避免造成假死状态。是理解进度条比较好的案例
vue+springboot 大文件上传
01-23
2. **上传进度显示**：Vue.js 的响应式特性可以实时更新上传进度，通过监听每个分片的上传事件，更新进度条。 3. **并发上传**：为了加速上传，可以在前端并发上传多个分片，但需要注意控制并发数量，以避免对...
springmvc (springboot) 文件上传 Html5上传进度条
12-22
从我的项目中摘出来的，springboot项目，可以拎出来单独运行，全量所有的模块请查看https://gitee.com/zgdong/icustom-boot 如果单独运行请自行修改maven依赖
springboot文件上传显示进度
weixin_37777574的博客
03-30 1125
2.新建实体类 @Data @EqualsAndHashCode(callSuper = false) @Accessors(chain = true) public class ProgressEntity { }3.新建监听器 /** *@author Administrator要获得上传文件的实时详细信息，必须继承org.apache.commons.fileupload.ProgressListener类，获得信息的时候将进度条对象Progress放在该监听器的session对象中 */ @Comp
SpringBoot上传文件返回前端进度条
xiaoxiaosu2的博客
12-07 1821
话不多说，直接上干货 1、需要创建一个实现了 processListener 接口的实现类用于监听文件上传进度 2、返回给前端的上传进度的实体类 3、继承 CommonsMultipartResolver 类的自定义文件上传处理类 4、将 spring 默认的文件上传处理类取消自动配置，并将 multipartResolver 指向我们刚刚创建好的继承 CommonsMultipartResolver 类的自定义文件上传处理类 至此，SpringBoot上传文件实现进度条代码编写完成，看效果
SpringBoot+Vue websocket上传文件进度条，带断开连接后处理（心跳）-前端-2
最新发布
weixin_43173475的博客
12-15 633
SpringBoot+Vue websocket上传文件进度条，带断开连接后处理（心跳）-前端-2
springboot实现文件上传实时进度（单文件）
TqingqingT的博客
07-15 1527
1.pom.xml文件中导入包。 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> 2.在...
jackson完成json和对象/map/list互转
热门推荐
飞翔的鸡肉
02-06 4万+
  jackson是一款非常好用的json转换工具，总结一下具体用法   一：导入依赖   &lt;dependency&gt; &lt;groupId&gt;com.fasterxml.jackson.core&lt;/groupId&gt; &lt;artifactId&gt;jackson-databind&lt;/artifactId&gt; &lt;version&gt...
springboot文件上传进度条
09-01
在Spring Boot中实现文件上传进度条可以使用一些现有的库或自定义解决方案。以下是一个简单的示例，展示了如何使用Spring Boot和AJAX实现文件上传进度条功能。 首先，确保你的Spring Boot项目中已经添加了以下依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> ``` 接下来，创建一个Controller来处理文件上传的请求： ```java import org.apache.commons.fileupload.ProgressListener;import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; @Controller public class FileUploadController { @Value("${upload.path}") private String uploadPath; // 文件上传路径 @PostMapping("/upload") @ResponseBody public Map<String, Object> uploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request) { Map<String, Object> result = new HashMap<>(); if (file.isEmpty()) { result.put("success", false); result.put("message", "请选择文件"); return result; } try { // 创建文件上传进度监听器 ProgressListener progressListener = new CustomProgressListener(request.getSession()); // 创建文件上传处理器 ServletFileUpload upload = new ServletFileUpload(); upload.setProgressListener(progressListener); // 执行文件上传 String filename = file.getOriginalFilename(); file.transferTo(new File(uploadPath + File.separator + filename)); result.put("success", true); result.put("message", "文件上传成功"); } catch (IOException e) { result.put("success", false); result.put("message", "文件上传失败"); } return result; } } ``` 在上面的代码中，我们使用`@RequestParam`注解来接收上传的文件，并通过`MultipartFile`类型的参数接收。在文件上传过程中，我们创建了一个自定义的进度监听器`CustomProgressListener`，可以用来获取上传进度信息。 接下来，我们需要实现进度监听器： ```java import org.apache.commons.fileupload.ProgressListener; import javax.servlet.http.HttpSession; public class CustomProgressListener implements ProgressListener { private HttpSession session; public CustomProgressListener(HttpSession session) { this.session = session; } @Override public void update(long bytesRead, long contentLength, int items) { // 计算上传的百分比 double percent = (bytesRead * 100.0) / contentLength; // 将进度信息存储在session中 session.setAttribute("uploadProgress", percent); } } ``` 在进度监听器中，我们计算了上传的百分比，并将结果存储在`HttpSession`中，以便在前端页面中获取。 最后，在前端页面中使用AJAX轮询来获取上传进度： ```javascript function uploadFile() { var formData = new FormData(); var fileInput = document.getElementById("fileInput"); formData.append("file", fileInput.files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(event) { if (event.lengthComputable) { var percentComplete = (event.loaded / event.total) * 100; console.log(percentComplete + "%"); } }, false); xhr.open("POST", "/upload"); xhr.send(formData); } ``` 以上代码创建了一个XMLHttpRequest对象，并通过监听`progress`事件来获取上传进度信息，然后将信息打印到控制台。 这样，当你执行`uploadFile()`函数时，就可以实时获取文件上传的进度了。 这只是一个简单的示例，你可以根据实际需求进行扩展和优化。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值