div:
<div class="modal fade" id="processModal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="processModalLabel" aria-hidden="true" style="font-family: 微软雅黑;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title modalTitleText" id="processModalLabel">文件上传进度</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
</div>
</div>
</div>
</div>
js:
function run(){
$.ajax
({ //请求登录处理页
url: ContextPath + '/File/process.action',
//传送请求数据
dateType : "text",
type:"POST",
success: function (date) { //登录成功后返回的数据
//根据返回值进行状态显示
if(date<100){
$("div[class=progress-bar]").css("width",date+"%").text(date+"%");
setTimeout("run()",500);
}else{
$("div[class=progress-bar]").css("width",date+"%").text(date+"%");
}
}
})
}
java: springMvc
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
public class CustomMultipartResolver extends CommonsMultipartResolver {
private HttpServletRequest request;
@Override
protected FileUpload newFileUpload(FileItemFactory fileItemFactory)
{
ServletFileUpload upload = new ServletFileUpload(fileItemFactory);
upload.setSizeMax(-1);
if(request!=null)
{
///System.out.println("注入监听");
FileUploadListener uploadProgressListener = new FileUploadListener();
upload.setProgressListener(uploadProgressListener);
HttpSession session = request.getSession();
session.setAttribute("uploadProgressListener", uploadProgressListener);
}
return upload;
}
@Override
public MultipartHttpServletRequest resolveMultipart(HttpServletRequest request) throws MultipartException {
this.request=request;//获取到request,要用到session
return super.resolveMultipart(request);
}
}
import org.apache.commons.fileupload.ProgressListener;
public class FileUploadListener implements ProgressListener {
private long num100Ks = 0;
private long theBytesRead = 0;
private long theContentLength = -1;
private int whichItem = 0;
private int percentDone = 0;
private boolean contentLengthKnown = false;
public void update(long bytesRead, long contentLength, int items) {
if (contentLength > -1) {
contentLengthKnown = true;
}
theBytesRead = bytesRead;
theContentLength = contentLength;
whichItem = items;
long nowNum100Ks = bytesRead / 100000;
if (nowNum100Ks > num100Ks) {
num100Ks = nowNum100Ks;
if (contentLengthKnown) {
percentDone = (int) Math.round(100.00 * bytesRead / contentLength);
}
}
}
public int getPercentDone() {
return percentDone;
}
}
相关推荐
在网页开发中,jQuery、Bootstrap和百分比进度条...这个组件可以在许多场景下应用,比如文件上传、数据处理、游戏进度等,为用户提供直观的反馈。记得在实际项目中根据需求进行适当的调整和优化,以达到最佳用户体验。
要使用这个“bootstrap彩色斑马进度条”,你需要将项目压缩包中的“BootstrapProgress”文件解压到你的项目目录下,并确保已经正确地引入了Bootstrap的核心CSS和JavaScript库。然后,通过HTML代码和必要的JavaScript...
2. 使用MultipartFile接口:Spring MVC框架提供了MultipartFile接口,可以方便地处理文件上传。但是,对于大文件,需要自定义实现,避免内存溢出。 三、进度条显示 1. 客户端:在JavaScript或者使用jQuery等库,...
Bootstrap文件上传组件FileInput是一款强大的前端文件上传工具,尤其适合于需要实现文件批量上传的场景。这个组件基于Bootstrap框架,提供了美观的用户界面和丰富的功能,使得文件上传操作变得直观且易于实现。以下...
在本篇文章中,我们将探讨如何使用 Bootstrap 实现文件上传功能,并结合进度条效果,为用户提供更好的交互体验。 首先,要实现这个功能,我们需要引入 Bootstrap 的相关 JavaScript 和 CSS 文件。在示例代码中,...
例如,当文件上传、数据下载或其他需要时间的任务进行时,进度条的宽度会根据实际完成的百分比实时变化。如果使用jQuery,可以监听事件并使用`.width()`方法来调整进度条宽度。 HTML5在这里的作用可能体现在两个...
Bootstrap文件上传模板是一种基于Bootstrap前端框架的交互式文件上传解决方案。Bootstrap是Twitter开发的一个流行的开源HTML、CSS和JS库,它提供了丰富的预定义样式、组件和JavaScript插件,旨在简化网页设计和开发...
Bootstrap文件上传插件Bootstrap-FileInput是一款流行的前端文件上传组件,尤其在基于Bootstrap设计的项目中广泛应用。这个组件提供了一种美观、用户友好的方式来处理文件上传功能,支持多文件选择、预览、拖放操作...
进度条通常用来展示任务的完成程度,例如文件上传、数据加载等过程,为用户提供实时反馈。Bootstrap自带的进度条组件提供了一种简单的方式创建这样的条状反馈元素,但默认样式相对保守。在这个设计中,我们通过...
Bootstrap文件上传组件是一种基于Bootstrap框架的交互式文件上传工具,它极大地增强了HTML5中的file input元素的功能和样式,提供了一种美观且用户友好的界面来处理文件上传操作。这个组件通常被称为Bootstrap File ...
在Bootstrap中,进度条(Progress Bar)是一种显示任务进度或指示完成度的有效方式,尤其适用于加载、上传、下载等场景。下面将详细解释如何使用Bootstrap实现各种样式的进度条效果。 1. **基本结构**: Bootstrap...
进度条通常用于展示任务的完成状态,如文件上传、数据加载等过程,给用户一个明确的反馈。在Bootstrap框架中,原生的进度条是单一颜色的,但通过自定义CSS样式,我们可以将其转变为多彩渐变的效果,从而提升用户体验...
**jQuery Bootstrap多文件上传js**是一种利用jQuery库和Bootstrap框架实现的高级文件上传组件,它提供了丰富的功能和优雅的用户界面。这个组件旨在为用户提供一个简单而强大的方式来处理文件上传,包括选择多个文件...
当涉及到文件上传,尤其是批量上传和进度条显示时,jQuery 提供了一些强大的插件和方法来实现这些功能。在本篇文章中,我们将深入探讨如何利用 jQuery 实现文件上传,特别是批量上传和进度条显示的技术细节。 首先...
在实际应用中,这种百分比进度条动画特效可以用于各种场景,如文件上传、下载进度指示、任务完成度显示等。通过调整参数和样式,可以轻松适应不同的设计风格和功能需求。 总结来说,Bootstrap百分比进度条动画特效...
在这个"ssm文件上传,带进度条"的项目中,我们将探讨如何在SSM框架下实现文件上传并显示上传进度。 1. **文件上传组件** 在Java Web中,文件上传通常使用`Commons FileUpload`库或Spring MVC的`MultipartFile`接口...
为了提供更好的用户体验,引入了Ajax文件上传和进度条功能。这个话题主要涵盖了如何使用jQuery库和Apache的FileUpload组件来创建一个动态的、实时显示上传进度的界面。 **jQuery** 是一个流行的JavaScript库,它...
在IT行业中,大文件上传和进度条显示是用户体验的重要组成部分,尤其是在处理大量数据或多媒体文件时。本篇文章将深入探讨如何在JSP(JavaServer Pages)环境中实现大文件的分块上传并配合Ajax技术来展示实时进度条...
在Struts2中实现文件上传并展示进度条是一项常见的需求,它能提升用户体验,尤其是在处理大文件时。以下将详细解释如何在Struts2中实现这一功能。 首先,我们需要在Struts2配置中开启文件上传的支持。在`struts.xml...
"Struts2文件上传带进度条页面无刷新"的实现涉及多个技术点,包括Struts2的文件上传插件、AJAX异步通信以及前端进度条展示。 首先,Struts2的文件上传依赖于`struts2-upload-plugin`。这个插件扩展了Struts2的核心...