关键词：
【中文标题】使用 jQuery $.ajax 和 Spring Boot 上传图片的进度条【英文标题】：Progress bar for an image upload with jQuery $.ajax and Spring Boot 【发布时间】：2018-01-06 19:41:49 【问题描述】：我在 $.ajax 帖子中设置进度条时遇到问题，该帖子通过带有 Spring 框架的 @Controller 将图像上传到 Cloudinary 服务。我的问题是监控上传过程的事件从一开始就上传了整个文件。
ProgressEvent isTrusted: true, lengthComputable: true, loaded: 8718, total: 8718,
type: "progress"…
这是我的代码：
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$.ajaxSetup(
beforeSend: function(xhr)
xhr.setRequestHeader(header, token);
);
/*<![CDATA[*/
for(var i = 0; i < filesList.length; i++)
/*]]>*/
var formData = new FormData();
formData.append("file", filesList[i]);
$.ajax(
xhr: function()
var xhr = $.ajaxSettings.xhr();
//Upload progress
xhr.upload.addEventListener("progress", function(event)
if (event.lengthComputable)
var percentage = Math.round((event.loaded *100) / event.total);
$(".progress-bar").css("width", percentage + "%");
, false);
return xhr;
,
url: "/admin/web/cms/upload",
type: "POST",
contentType: false,
processData: false,
data: formData,
success: function(data)
$(".progress-bar").css("width", "0%");
);
console.log(filesList[i].size);
因此，进度条始终显示为已完成。 我该如何管理，监控图像上传过程，用进度条显示它？ 任何帮助将非常感激。提前谢谢你。
【问题讨论】：
你找到解决办法了吗？ 是的，但采用完全不同的方法。我已经发布了对我有用的代码摘录。我建议您查看 Cloudinary 文档，了解功能 cloudinary_fileupload。 【参考方案1】：解决方案是那个，带有cloudinary_fileupload 函数：
$(".cloudinary-fileupload").cloudinary_fileupload(
...
progressall: function(e, data)
$(".progress-bar").width(Math.round((data.loaded * 100.0) / data.total) + "%");
$(".progress-bar").text(Math.round((data.loaded * 100.0) / data.total) + "%");
if((Math.round((data.loaded * 100.0) / data.total) === 100) && filesAmount > -1)
$(".progress-bar").text('');
$("#uploading").text(processingImatges);
$(".progress-bar").addClass("progress-bar-striped progress-bar-animated");
$(window).bind('beforeunload', function()
return processingImatges;
);
,
使用这种方法，进度条会同时监控正在上传的所有图像，而不是每一张。
【讨论】：
Spring 3 jquery ajax 删除
...【发布时间】：2012-06-0117:33:22【问题描述】：我正在尝试使用jquery进行ajax删除，但收到http错误400。我正在搜索，我发现jquery中的delete方法存在一些问题。这是我的js、控制器（spring3）和来自Chrome的请求。如果你现在有什么错误... 查看详情
尝试通过 Spring MVC 和 Thymeleaf 使用 React/Ajax 调用
】尝试通过SpringMVC和Thymeleaf使用React/Ajax调用【英文标题】：TryingtouseReact/AjaxcallswithSpringMVCandThymeleaf【发布时间】：2016-03-2308:58:19【问题描述】：根据文档，我应该能够在标头中包含CSRF令牌，使用jquery获取它们，并将它们包含在... 查看详情
如何使用modelAttribute在ajax（jquery）中提交spring表单
】如何使用modelAttribute在ajax（jquery）中提交spring表单【英文标题】：Howtosubmitspringforminajax(jquery)withmodelAttribute【发布时间】：2012-12-0702:41:11【问题描述】：我是SpringMVC的新手。我有这样的表格，<form:formaction="/myaction.htm&qu... 查看详情
Ajax JQuery 到 Spring @RequestBody？我如何传递数据？
...递表单字段来做春天，但我正在开发一个新系统，我们想使用Ajax和RESTful来传递数据。我的控制器看 查看详情
如何使用 spring-security 和 jQuery 处理过期会话？
】如何使用spring-security和jQuery处理过期会话？【英文标题】：Howtohandleexpiredsessionusingspring-securityandjQuery?【发布时间】：2011-11-0618:13:23【问题描述】：我在我的应用程序中使用spring-security和jQuery。主页使用通过Ajax将内容动态加载... 查看详情
使用 Spring MVC 从 Jquery ajax 方法返回字符串数组
】使用SpringMVC从Jqueryajax方法返回字符串数组【英文标题】：ReturningaStringarrayfromJqueryajaxmethodusingSpringMVC【发布时间】：2012-08-0904:10:57【问题描述】：我正在尝试使用JQuery的.ajax方法动态生成列表/下拉列表。以下是我写的代码：<... 查看详情
如何在 Spring Web MVC 中使用 Ajax JQuery
】如何在SpringWebMVC中使用AjaxJQuery【英文标题】：HowtouseAjaxJQueryinSpringWebMVC【发布时间】：2010-12-1300:27:33【问题描述】：我正在为我的应用程序使用SpringWebMVC。我的JSP视图中有1个下拉列表，来自名为savegroup.htm的以下请求<beanname=... 查看详情
java示例代码_在两个应用程序之间使用jquery ajax post调用spring mvc3
java示例代码_在两个应用程序之间使用jquery ajax post调用spring mvc3 查看详情
使用spring webMVC和spring security的ajax登录
】使用springwebMVC和springsecurity的ajax登录【英文标题】：ajaxloginwithspringwebMVCandspringsecurity【发布时间】：2011-03-2713:40:14【问题描述】：我一直在使用SpringSecurity3.0作为我们的网站登录机制，使用专用的登录网页。现在，我需要将该... 查看详情
使用ajax和spring mvc上传多个文件
】使用ajax和springmvc上传多个文件【英文标题】：Uploadmultiplefilesusingajaxandspringmvc【发布时间】：2015-11-0322:16:27【问题描述】：我正在尝试使用FormData和spring上传多个文件。HTML：<inputtype="file"name="img"multipleid="upload-files">JS代码：... 查看详情
如何在 Spring Boot 中使用 JavaScript、jQuery 的 Ajax 成功时将数字转化为星级？
】如何在SpringBoot中使用JavaScript、jQuery的Ajax成功时将数字转化为星级？【英文标题】：HowtoturnnumberintostarratingwhileAjaxsuccessusingJavaScript,jQueryinSpringBoot?【发布时间】：2021-09-1403:21:48【问题描述】：我正在开发一个SpringBootWeb应用程序... 查看详情
ajax-05使用xmlhttprequest和jquery实现ajax实例
需求：（django）使用XMLHttpRequest和jQuery实现Ajax加法运算 url.py:fromdjango.conf.urlsimporturlfromhelloimportviewsurlpatterns=[url(r‘add/‘,views.add,name=‘add‘),url(r‘add_number/‘,views.add_number,name=‘add_n 查看详情
使用 Jquery 和 Ajax 上传文件时出错
】使用Jquery和Ajax上传文件时出错【英文标题】：ErrorinfileuploadusingJquery&Ajax【发布时间】：2016-07-1016:37:59【问题描述】：我正在尝试使用jQuery和AJAX上传文件。我使用了HTML5支持的FormData对象。我正在使用IE11。以下是我的代码：&... 查看详情
使用spring框架、ajax和JWT登录
】使用spring框架、ajax和JWT登录【英文标题】：Loginusingspringframework,ajaxandJWT【发布时间】：2015-11-2210:52:00【问题描述】：有一个spring应用需要用户认证。它检查JWTcookie是否存在，然后允许用户访问，否则重定向到身份验证应用程... 查看详情
如何使用 jQuery.ajax 和 FormData 上传文件
】如何使用jQuery.ajax和FormData上传文件【英文标题】：HowtouploadafileusingjQuery.ajaxandFormData【发布时间】：2012-03-2605:53:23【问题描述】：当我使用XMLHttpRequest时，使用FormData正确上传了一个文件。但是，当我切换到jQuery.ajax时，我的代... 查看详情
如何使用 jQuery.ajax 和 FormData 上传文件
】如何使用jQuery.ajax和FormData上传文件【英文标题】：HowtouploadafileusingjQuery.ajaxandFormData【发布时间】：2012-03-2605:53:23【问题描述】：当我使用XMLHttpRequest时，使用FormData正确上传了一个文件。但是，当我切换到jQuery.ajax时，我的代... 查看详情
Spring MVC、Ajax 和同源策略
...ameOriginPolicy【发布时间】：2014-07-2311:23:58【问题描述】：使用springMVCRest服务克服Ajax调用中的同源策略的最佳方法是什么？是添加标头值还是使用JSONP？如何在SpringMvcREST中同时使用RequestParam和PathVariable映射请求？@RequestMapping(value 查看详情
使用javascript和jquery简单实现ajax技术
...Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而 查看详情