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

news2024/11/16 6:05:03

后端接口代码：

 @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 * 100
            sliderBar.style.width =  `${percentage}%`
            document.querySelector(".percentage").innerHTML = `${percentage.toFixed(2)}`
        })
        xhr.open('post', 'http://localhost:80/upload')
        xhr.send(fd)
    }
</script>