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;
}
}
相关推荐
JAVA G级别超大文件,带进度条,断点上传
主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条。 后台的代码在之前写过了 这只有前台的代码 记得:在验证的时候,尽量用...
主要介绍了Bootstrap文件上传组件之bootstrap fileinput,重点是把界面做得更加友好,更好的增加用户体验。还有还多注意细节大家可以通过本文详细了解下
本篇文章主要介绍了spring MVC + bootstrap实现文件上传示例(带进度条),非常具有使用价值,有需要的朋友可以了解一下。
上传组件功能:多文件上传,多类型文件上传,上传进度监听,附带Bootstrap3中进度条
一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览,并且...另外,它还包含基于AJAX的上传,拖拽,移除文件的功能,可视化的上传进度条,和可选择的添加或删除文件预览功能。
Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值。然后前台再每隔很小的一段时间去请求这个值。 在AngularJS中,$http...
打包资源中涵盖前后台代码整合以及相应的js等,支持多文件可拖拽式的附件上传。一次选择多个文件到面板中,支持在线预览功能,进度条显示,移除和取消待传文件,以及操作单个文件点击上传等。
jQuery+ajax实现文件上传功能(显示文件上传进度),供大家参考,具体内容如下 具体实现步骤 1、定义UI结构,引入bootstrap的CSS文件和jQuery文件 2、给上传按钮绑定点击事件 3、验证是否选择了文件 4、向FormData...
Bootstrap UploadProgress是一个简单的插件,可以将上传进度条添加到上传文件的表单中。 对于大多数没有上载进度指示的浏览器来说,这会有所改善。 入门,文档和示例 错误追踪器 有错误或功能要求吗? 。 版权和许可...
本文实例为大家分享了jquery实现上传文件进度条的具体代码,供大家参考,具体内容如下 首先引入需要的js css 用bootstrap进度条 <link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" > [removed]...
不错的html5的前端框架,集成了完整的bootstrap脚本,可切换8中不同的前端样式; 封装了常用的grid表格、在线编辑器、文件上传、日期控件、进度条、弹出框等。 是UI设计不错的选择。
选择文件并上传浏览器访问“ 127.0.0.1:5000/file/list”,点击一个上传的文件进行下载效果文件上传成功文件上传失败技术Python语言,Flask框架WebUploader分片与上传,Bootstrap渲染上传进度条发表大致思路: 下载...
带进度条的 nodeJs 文件上传 带进度条的 nodeJs 中的简单文件上传 使用的技术: NodeJs, expressJs, bootstrap, jquery npm install node app.js 如需演示,请单击此链接
jmFileUpload - jQuery 多文件 AJAX 文件上传 jmFileUpload 是一个简单的设置 jQuery 文件上传插件。 该插件依赖于 Bootstrap 3.0 的样式,但您可以更改它以满足您的需要。 事不宜迟,让我们开始如何设置插件。 #...
一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览,并且...另外,它还包含基于AJAX的上传,拖拽,移除文件的功能,可视化的上传进度条,和可选择的添加或删除文件预览功能。