Mr丶冷文

文章 分类 评论
125 10 7936

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

异步上传文件显示进度条

MR丶冷文 2022-01-25 1729 2条评论 技术学习 javaspringboot上传文件异步

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

异步上传文件显示进度条

问题

我们在写网站时难免会遇到需要上传文件的场景,但当上传大文件时比如5个G的文件直接用表单直接提交文件会出现页面卡顿、未响应等影响用户体验的情况,而且用户也不知道文件上传的进度,他就会认为是不是网页卡死了从而直接关闭页面或者刷新页面而导致上传失败

解决

那么针对上述的问题我们有没有什么好的解决办法呢?答案肯定是有的

我们可以利用异步+监听来帮我们解决这个问题

创建一个FormData对象

  • 我们可以手动创建一个表单对象来存放我们要上传的文件,代码如下:
let fd = new FormData();
fd.append("file", fs); //fs 为要上传的文件

利用XMLHttpRequest发送异步请求去提交表单

  • 创建一个XMLHttpRequest对象
  • 将上步创建的表单对象放入request body
  • 开始上传
  • 成功回调
let xhr = new XMLHttpRequest();
// /upload为目标url,换成你自己的
xhr.open("POST", "/upload", true);
xhr.send(fd);
xhr.onloadend = function () {
  alert("上传成功")
}

加入监听

  • 完成上述操作我们已经可以异步上传,但异步上传时用户还不知道上传的进度,所以我们需要在上传之前加上监听
let xhr = new XMLHttpRequest();
// /upload为目标url,换成你自己的
xhr.open("POST", "/upload", true);
// uploadProgress为监听的回调
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.send(fd);
xhr.onloadend = function () {
  alert("上传成功")
}
  • uploadProgress中获取上传进度
function uploadProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded:文件上传的大小 evt.total:文件总的大小
    console.log(evt.loaded);
    console.log(evt.total);
    let percentComplete = Math.round((evt.loaded) * 100 / evt.total);
    consolo.log("进度:"+percentComplete+"%")
  }
}

完整代码

效果

我这里上传一个5G多的文件为例

上传效果
https://s1.ax1x.com/2022/04/22/L2tXz4.gif

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="card">
    <h5 class="card-header">上传演示</h5>
    <div class="card-body">
        <p>
            <button type="button" id="upload-btn" class="btn btn-primary">上传文件</button>
        </p>
        <h5 class="card-title">上传进度</h5>
        <div class="progress">
            <div id="upload-progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                 aria-valuemax="100"></div>
        </div>
    </div>
</div>
<div id="upload-box" class="hide" style="display: none">
    <input type="file">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(function () {
        $("#upload-btn").on('click', function () {
            $("#upload-box input[type=file]").click();
        })
        let fs = {}
        $("#upload-box").on('change', 'input[type=file]', function () {
            fs = this.files[0]
            $("#upload-box").html('<input type="file">');
            doUpload()
        })

        function doUpload() {
            let xhr = new XMLHttpRequest();
            let fd = new FormData();
            fd.append("file", fs);
            xhr.open("POST", "/upload", true);// 上传目标
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.send(fd);
            xhr.onloadend = function () {
                alert("上传成功")
            }
        }

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                // evt.loaded:文件上传的大小 evt.total:文件总的大小
                console.log(evt.loaded);
                console.log(evt.total);
                let percentComplete = Math.round((evt.loaded) * 100 / evt.total);
                $("#upload-progress").width(percentComplete + "%").attr("aria-valuenow",percentComplete)
            }
        }
    })
</script>
</body>
</html>

后端Java代码

我就以后端程序为springboot为例,写了一个简单的上传文件的Controller

package com.example.filedemo.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;

@Controller
public class UploadController {
    private static final Logger LOGGER = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/upload")
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "上传失败,请选择文件";
        }

        String fileName = file.getOriginalFilename();
        String filePath = "./temp/";
        File dest = new File(filePath + fileName);
        try {
            file.transferTo(dest);
            LOGGER.info("上传成功");
            return "上传成功";
        } catch (IOException e) {
            LOGGER.error(e.getMessage(), e);
        }
        return "上传失败!";
    }


}

评论(2)

  1. 4 游客 2022-07-19 22:58 回复

    初试复试

  2. 壹元 游客 2022-04-22 14:49 回复


热门文章

最新评论

  • 六叔

    感谢博主,下载学习

  • 叶秋

    主题真的太棒了

  • 辛阳

    下载试试看,谢谢

  • 叶秋

    主题真的太棒了

  • klees

    学习一下

日历

2024年03月

     12
3456789
10111213141516
17181920212223
24252627282930
31      

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭