springboot和jquery.form.js实现监听文件上传进度
说明
文件上传作为程序开发最常用的功能之一,上传进度展示也是必须的。但是有时候进度并不准,进度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实现监听文件上传进度的更多相关文章
- SpringMVC 监听文件上传进度
Spring MVC 监听文件上传进度 具体实现分三个步骤: 接管CommonsMultipartResolver,重写针对文件上传的请求. 在第一步中写入监听,以获取上传进度. 修改上传部分的配置文 ...
- 基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度
借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...
- jquery.form 和MVC4做无刷新上传DEMO
jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...
- python django + js 使用ajax进行文件上传并获取上传进度案例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js获取文件上传进度
js获取文件上传进度: <input name="file" id="FileUpload" type="file" /> &l ...
- Node.js:上传文件,服务端如何获取文件上传进度
内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...
- js 实现 input file 文件上传
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载
元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...
- JavaScript实现form表单的多文件上传
form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...
- 前端使用 js 如何实现大文件上传
前端使用 js 如何实现大文件上传 大文件上传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
随机推荐
- 让vs自动提示没有using的类
默认情况下,没有using的类,敲代码时没有智能提示,需要在[工具]->[选项]中开启
- Redis IO多线程的简要测试结果
Redis IO多线程的简要测试结果 摘要 最近想简单确认一下IO多线程的对吞吐量的提升情况. 正好手头有鲲鹏的机器, 所以想直接进行一下验证 顺便用一下4216 进行一下对比. 发现 在CPU核心比 ...
- 测试环境Nginx反向代理负载均衡模板说明
公司里面为了验证 https 以及域名特点进行了相关的测试工作. 为了简单起见 将 安装文件执行了导出. 这样的话就比较简单了. 注意说明一点的是 我这边导出的工具都是 放到根目录下面 目录最简单. ...
- Redis-dump Docker搭建的快速指南
背景 最近学习redis想能够将dump文件进行导入处理. 看到比较好的办法都是使用ruby ,但是公司的网络太感人了. 想着比较简单的办法是通过docker方式来搭建. 这里简单记录一下搭建过程. ...
- ChaosMesh 半离线安装过程
说明 所谓半离线值得是公司拉不下镜像来 !-_-! 都是学习的官网资料https://chaos-mesh.org/docs 镜像获取 其实镜像获取很容易. 找一个能上外网的VPC就可以了. mkdi ...
- CentOS8 设置开机自动登录账户的方法
CentOS8 设置开机自动登录账户的方法 修改/etc/gdm/custom.conf文件, 并且添加内容即可. vim /etc/gdm/custom.conf # 在配置节下添加如下内容. [d ...
- 【行云流水线】满足你对工作流编排的一切幻想~skr
流水线模型 众所周知,DevOps流水线(DevOps pipeline)的本质是实现自动化工作流程,用于支持软件开发.测试和部署的连续集成.交付和部署(CI/CD)实践.它是DevOps方法论的核心 ...
- 【团队效率提升】Python-PyWebIO介绍
作者:京东零售 关键 Q&A快速了解PyWebIO Q:首先,什么是PyWebIO? A:PyWebIO提供了一系列命令式的交互函数,能够让咱们用只用Python就可以编写 Web 应用, 不 ...
- vscode搜索框不见了如何显示
- P7036 [NWRRC2016] Folding
题目简述 有两个矩形,大小分别是 \(W \times Y\) 和 $ w \times y$.现在我们要通过折叠将两个矩阵变成一样. 思路 part1 已知一条边折叠一次会变成 \(\frac{x} ...