当前位置：首页 > news >正文

前后端实现文件上传进度条-实时进度

news 来源：原创 2024/9/29 13:22:59

后端接口代码：

 @PostMapping("/upload")public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {try {// 获取文件名String fileName = file.getOriginalFilename();// 创建上传目标路径Path targetPath = Paths.get(System.getProperty("user.dir")+"/file", fileName);// 保存文件到本地Files.copy(file.getInputStream(), targetPath, StandardCopyOption.REPLACE_EXISTING);// 返回上传成功信息return ResponseEntity.ok().body("File uploaded successfully: " + fileName);} catch (IOException e) {e.printStackTrace();// 返回上传失败信息return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file: " + e.getMessage());}}

前端代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta  http-equiv="Content-Type" charset="UTF-8"><title>文件上传进度条</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><link rel="stylesheet" href="css/sl.css"><style>body {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}.uploader {display: flex;align-items: center;}.slider-track {width: 70vw;height: 8px;background-color: #080101;margin: 20px 10px 20px 0;border-radius: 4px;}.slider-bar {height: 8px;width: 0px;border-radius: inherit;background-image: linear-gradient(to right, #018eb2, #29c9eb);transition: width;}</style>
</head>
<body><input type="file" onchange="uploadFile(this.files)">
<div class="uploader"><div class="slider-track"><div class="slider-bar"></div></div><div><span class="percentage">0</span>%</div>
</div></body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3-source.js"></script>
<script>function uploadFile(files) {let fd = new FormData();//fd.append('file', files[0], "2.jpg")//设置第三个参数，就按第三个格式和名称来 不建议fd.append('file', files[0])//不设置第三个参数，就上传什么文件存什么文件格式let xhr = new XMLHttpRequest();let sliderBar = document.querySelector(".slider-bar")sliderBar.style.width = "0"xhr.upload.addEventListener("progress", function (e) {let percentage = e.loaded / e.total * 100sliderBar.style.width =  `${percentage}%`document.querySelector(".percentage").innerHTML = `${percentage.toFixed(2)}`})xhr.open('post', 'http://localhost:80/upload')xhr.send(fd)}
</script>