Springboot上传文件&显示进度条

全栈程序员站长

发布于 2022-09-05 15:28:27

4.7K0

发布于 2022-09-05 15:28:27

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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

}

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137674.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年6月1，如有侵权请联系 cloudcommunity@tencent.com 删除

https