多个文件上传，并且显示进度条

技术交流
1

没事儿帮群友写的demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test</title>
	</head>
	<body>
		<input type="file" onchange="upload(this.files, 'process_1');"/><br/>
		<progress max="100" value="0" id="process_1"></progress><br/>
		
		<input type="file" onchange="upload(this.files, 'process_2');"/><br/>
		<progress max="100" value="0" id="process_2"></progress>
	</body>
	<script type="text/javascript">
		function upload (files, process){
			const file = files[0];
			const node = document.querySelector('#' + process);
			
			const formData = new FormData();
			formData.set('files', file);
			
			const request = new XMLHttpRequest();
			request.open("POST", "/upload", true);
			if (request.upload){
				request.upload.addEventListener('progress', event => {
					const percent  = ((event.loaded / event.total) * 100).toFixed(2);
					node.setAttribute('value', percent);
				}, false);
			}
			request.send(formData);
			request.onreadystatechange = function()	{
				if(request.readyState == 4 && request.status == 200){
					const message = JSON.parse(request.responseText);
					console.log(message);
				}
			}
		}
	</script>
</html>
2 Likes
2 
1.  spring后端实现一个上传监听器，应该是apache common-upload 中的  implements ProgressListener 接口，然后注入spring中，太简单了，参考下面链接
参考这个：https://www.cnblogs.com/ooo0/p/10371200.html
1 Like