说明

文件上传作为程序开发最常用的功能之一，上传进度展示也是必须的。但是有时候进度并不准，进度100%了实际上后台尚未接收完毕，本篇就介绍如何利用jquery的form插件来实时反馈文件上传进度。

实现效果


注意：最后100%停了一下才出现返回结果，因为服务器端在将二进制流写入到磁盘中耗费了点时间。

关于jquery.form

1.这个框架集合form提交、验证、上传的功能。
2.这个框架必须和jquery完整版结合，否则使用min则无效。
原理：利用js进行对form进行组装成ajax的url和data，原理还是用ajax来提交，其实这完全可以自己写，但是有这个框架可能会更简单。

  • 支持的功能有：
    -ajaxForm
    -ajaxSubmit
  • formToArray
  • formSerialize
  • fieldSerialize
  • fieldValue
  • clearForm
  • clearFields
  • resetForm

详细用法请参考：https://jquery.malsup.com/form/

开发步骤

1.文件上传类

@Controller

@RequestMapping("/api/file")

public class FileUploadController {

    @RequestMapping(value="/upload", method=RequestMethod.POST )

    @ResponseBody

    public Map<String,Object> uploadFile(@RequestParam("fileItem") MultipartFile fileItem )

    {

        String filename = fileItem.getOriginalFilename();

        try {

            byte[] fileBytes = fileItem.getBytes();

            Files.write(Paths.get("D:\\tmp\\" + fileItem.getOriginalFilename()), fileBytes);

        } catch (IOException e) {

            e.printStackTrace();

        }

        Map<String,Object> result = new HashMap<>();

        result.put("code",200);

        result.put("message",filename+"上传成功！");

        return result;

    }

}

2.前端页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文件上传</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

    <script src="http:///code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

    <style type="text/css">

        .progress{

            width: 500px;

            height:24px;

            line-height:24px;

        }

    </style>

</head>

<body>

    <h1>jquery.form方式展示文件上传进度</h1>

    <div id="progressbar" class="progress"></div>

    <div class="percent">0%</div >

    <div id="status"></div>

    <form action="/api/file/upload" method="post" enctype="multipart/form-data">

        <input type="file" name="fileItem"><br>

        <input type="submit" value="Upload File to Server">

    </form>

    <script>

        $(function() {

            // 初始化进度条

            var progressbar = $( "#progressbar" );

            progressbar.progressbar({

                value: 0

                /*change: function() {

                    progressLabel.text( progressbar.progressbar( "value" ) + "%" );

                },

                complete: function() {

                    progressLabel.text( "上传完成!" );

                }*/

            });

            var percent = $('.percent');

            var status = $('#status');

            $('form').ajaxForm({

                beforeSend: function() {

                    status.empty();

                    var percentVal = '0%';

                    //bar.width(percentVal);

                    percent.html(percentVal);

                },

                uploadProgress: function(event, position, total, percentComplete) {

                    var percentVal = percentComplete + '%';

                    //bar.width(percentVal);

                    $( "#progressbar" ).progressbar({

                        value: percentComplete

                    });

                    progressbar.find( ".ui-progressbar-value" ).css({

                        "background": "rgb(105 167 69)"

                        //"background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )

                    });

                    percent.html(percentVal);

                },

                complete: function(xhr) {

                    status.html(xhr.responseText);

                }

            });

        });

    </script>

</body>

</html>

3.修改application.yml

启动配置文件中添加以下内容，因为默认文件上传大小被限制在10m，此处放大到1G。

spring:

  servlet:

    multipart:

      max-file-size: 1000MB

      max-request-size: 1000MB

4.启动项目

访问：http://localhost:9000/ajaxupload.html
安图所示测试：

项目源码

觉得有帮助的朋友给老徐来个收藏+点赞+关注，：）

https://gitee.com/indexman/spring_boot_in_action/blob/master/websocket

springboot和jquery.form.js实现监听文件上传进度的更多相关文章

  1. SpringMVC 监听文件上传进度

    Spring MVC 监听文件上传进度 具体实现分三个步骤: 接管CommonsMultipartResolver,重写针对文件上传的请求. 在第一步中写入监听,以获取上传进度. 修改上传部分的配置文 ...

  2. 基于element ui 实现七牛云自定义key上传文件，并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  3. jquery.form 和MVC4做无刷新上传DEMO

    jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...

  4. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js获取文件上传进度

    js获取文件上传进度: <input name="file" id="FileUpload" type="file" /> &l ...

  6. Node.js：上传文件，服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

  7. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  8. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  9. JavaScript实现form表单的多文件上传

    form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...

  10. 前端使用 js 如何实现大文件上传

    前端使用 js 如何实现大文件上传 大文件上传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

随机推荐

  1. Kubernerts - 概览

    1. Kubernerts K8s,是用于自动部署.扩容和管理容器化应用程序的开源系统 1.1 特性 自动化上线与回滚 分步骤针对应用或者配置更改上线,监控应用的运行状态同时不会终止所有实例,若出现问 ...

  2. [转帖]数据库连接池选型 Druid vs HikariCP性能对比

    这里主要比较HikariCP 和阿里的Druid springboot 现在官方默认的数据库连接池是 HikariCP,HikariCP的性能从测试的数据上来看也是最高的. 先来看下这个著名的issu ...

  3. [转帖]Archery

    Archery SQL 审核查询平台          文档 | FAQ | Releases 功能清单 数据库 查询 审核 执行 备份 数据字典 慢日志 会话管理 账号管理 参数管理 数据归档 My ...

  4. [转帖]金仓数据库KingbaseES数据目录结构

    KingbaseES数据库结构 [kingbase@postgresV8]$ tree -LP2data/ . ├── data │ ├── base # 存储用户创建的数据库文件及隶属于用户数据库的 ...

  5. Java进程 OOM的多种情况

    Java进程 OOM的多种情况 摘要 OOM 其实有多种: 第一类是JVM原生自发处理的, 这种也分为多种情况. 1. 堆区使用了比较多,并且大部分对象都还有引用, GC不出来可用内存, 这是要给对象 ...

  6. bcc工具的简要学习

    摘要 继续补充假期落下的内容. 其实有很多知识需要学习, 自己掌握的还是偏少一些. bcc的全貌 # 注意 bcc 需要较高的内核. 3.10 系列的内核基本不可用. argdist drsnoop ...

  7. Oracle12c(未更新任何补丁) 使用compression=all 参数导出之后导入失败

    1. 最近使用Oracle12c 进行相关的测试工作, 平台linux 和 windows 都有一个问题 备份恢复使用的 compression=all 时导入数据库不管是oracle12c还是 or ...

  8. ESXi6.7安装Win11的方法

    背景 公司里面要进行新的操作系统验证了. 之前Win10 Win7 Win8 都比较简单. 就是现在Win11有了TPM非常繁琐. 今天必须得搞一把了,就简单搜索了下. 发现还是可以解决的. 然后记录 ...

  9. DBLink实现备份文件不落盘的导入其他Oracle数据库实例的方法

    DBLink实现备份文件不落盘的导入其他Oracle数据库实例的方法 背景 公司内经常有从其他服务器备份数据库实例的需求 之前的操作一般需要,备份源服务器使用expdp将source导出dump文件. ...

  10. vulnhub靶场渗透学习

    攻击机:192.168.100.251 目标机:192.168.100.17 netdiscover netdiscover -r 192.168.100.1/24 Currently scannin ...