`

bootstrap 文件上传进度条

 
阅读更多

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样式百分比进度条

    在网页开发中,jQuery、Bootstrap和百分比进度条...这个组件可以在许多场景下应用,比如文件上传、数据处理、游戏进度等,为用户提供直观的反馈。记得在实际项目中根据需求进行适当的调整和优化,以达到最佳用户体验。

    bootstrap彩色斑马进度条

    要使用这个“bootstrap彩色斑马进度条”,你需要将项目压缩包中的“BootstrapProgress”文件解压到你的项目目录下,并确保已经正确地引入了Bootstrap的核心CSS和JavaScript库。然后,通过HTML代码和必要的JavaScript...

    WEB超大文件带进度条上传

    2. 使用MultipartFile接口:Spring MVC框架提供了MultipartFile接口,可以方便地处理文件上传。但是,对于大文件,需要自定义实现,避免内存溢出。 三、进度条显示 1. 客户端:在JavaScript或者使用jQuery等库,...

    bootstrap 文件上传组件 fileinput 实现文件批量上传

    Bootstrap文件上传组件FileInput是一款强大的前端文件上传工具,尤其适合于需要实现文件批量上传的场景。这个组件基于Bootstrap框架,提供了美观的用户界面和丰富的功能,使得文件上传操作变得直观且易于实现。以下...

    BootStrap实现文件上传并带有进度条效果

    在本篇文章中,我们将探讨如何使用 Bootstrap 实现文件上传功能,并结合进度条效果,为用户提供更好的交互体验。 首先,要实现这个功能,我们需要引入 Bootstrap 的相关 JavaScript 和 CSS 文件。在示例代码中,...

    Bootstrap飞机跑道进度条动画特效.zip

    例如,当文件上传、数据下载或其他需要时间的任务进行时,进度条的宽度会根据实际完成的百分比实时变化。如果使用jQuery,可以监听事件并使用`.width()`方法来调整进度条宽度。 HTML5在这里的作用可能体现在两个...

    bootstrap-文件上传模板下载

    Bootstrap文件上传模板是一种基于Bootstrap前端框架的交互式文件上传解决方案。Bootstrap是Twitter开发的一个流行的开源HTML、CSS和JS库,它提供了丰富的预定义样式、组件和JavaScript插件,旨在简化网页设计和开发...

    bootstrap文件上传bootstrap-fileinput

    Bootstrap文件上传插件Bootstrap-FileInput是一款流行的前端文件上传组件,尤其在基于Bootstrap设计的项目中广泛应用。这个组件提供了一种美观、用户友好的方式来处理文件上传功能,支持多文件选择、预览、拖放操作...

    Bootstrap彩色斑马线条纹进度条设计效果

    进度条通常用来展示任务的完成程度,例如文件上传、数据加载等过程,为用户提供实时反馈。Bootstrap自带的进度条组件提供了一种简单的方式创建这样的条状反馈元素,但默认样式相对保守。在这个设计中,我们通过...

    bootstrap文件上传组件

    Bootstrap文件上传组件是一种基于Bootstrap框架的交互式文件上传工具,它极大地增强了HTML5中的file input元素的功能和样式,提供了一种美观且用户友好的界面来处理文件上传操作。这个组件通常被称为Bootstrap File ...

    BootStrap 实现各种样式的进度条效果

    在Bootstrap中,进度条(Progress Bar)是一种显示任务进度或指示完成度的有效方式,尤其适用于加载、上传、下载等场景。下面将详细解释如何使用Bootstrap实现各种样式的进度条效果。 1. **基本结构**: Bootstrap...

    Bootstrap多彩渐变进度条特效

    进度条通常用于展示任务的完成状态,如文件上传、数据加载等过程,给用户一个明确的反馈。在Bootstrap框架中,原生的进度条是单一颜色的,但通过自定义CSS样式,我们可以将其转变为多彩渐变的效果,从而提升用户体验...

    jquery BootStrap多文件上传js

    **jQuery Bootstrap多文件上传js**是一种利用jQuery库和Bootstrap框架实现的高级文件上传组件,它提供了丰富的功能和优雅的用户界面。这个组件旨在为用户提供一个简单而强大的方式来处理文件上传,包括选择多个文件...

    jquery 上传,批量上传 进度条显示

    当涉及到文件上传,尤其是批量上传和进度条显示时,jQuery 提供了一些强大的插件和方法来实现这些功能。在本篇文章中,我们将深入探讨如何利用 jQuery 实现文件上传,特别是批量上传和进度条显示的技术细节。 首先...

    Bootstrap百分比进度条动画特效.zip

    在实际应用中,这种百分比进度条动画特效可以用于各种场景,如文件上传、下载进度指示、任务完成度显示等。通过调整参数和样式,可以轻松适应不同的设计风格和功能需求。 总结来说,Bootstrap百分比进度条动画特效...

    ssm文件上传,带进度条

    在这个"ssm文件上传,带进度条"的项目中,我们将探讨如何在SSM框架下实现文件上传并显示上传进度。 1. **文件上传组件** 在Java Web中,文件上传通常使用`Commons FileUpload`库或Spring MVC的`MultipartFile`接口...

    ajax文件上传进度条

    为了提供更好的用户体验,引入了Ajax文件上传和进度条功能。这个话题主要涵盖了如何使用jQuery库和Apache的FileUpload组件来创建一个动态的、实时显示上传进度的界面。 **jQuery** 是一个流行的JavaScript库,它...

    jsp大文件上传带进度条

    在IT行业中,大文件上传和进度条显示是用户体验的重要组成部分,尤其是在处理大量数据或多媒体文件时。本篇文章将深入探讨如何在JSP(JavaServer Pages)环境中实现大文件的分块上传并配合Ajax技术来展示实时进度条...

    struts2上传文件进度条显示

    在Struts2中实现文件上传并展示进度条是一项常见的需求,它能提升用户体验,尤其是在处理大文件时。以下将详细解释如何在Struts2中实现这一功能。 首先,我们需要在Struts2配置中开启文件上传的支持。在`struts.xml...

    Struts2文件上传带进度条页面无刷新

    "Struts2文件上传带进度条页面无刷新"的实现涉及多个技术点,包括Struts2的文件上传插件、AJAX异步通信以及前端进度条展示。 首先,Struts2的文件上传依赖于`struts2-upload-plugin`。这个插件扩展了Struts2的核心...

Global site tag (gtag.js) - Google Analytics