`

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;
 }
}

 

分享到:
评论

相关推荐

    WEB超大文件带进度条上传

    JAVA G级别超大文件,带进度条,断点上传

    BootStrap Progressbar 实现大文件上传的进度条的实例代码

    主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

    用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条。 后台的代码在之前写过了 这只有前台的代码 记得:在验证的时候,尽量用...

    Bootstrap文件上传组件之bootstrap fileinput

    主要介绍了Bootstrap文件上传组件之bootstrap fileinput,重点是把界面做得更加友好,更好的增加用户体验。还有还多注意细节大家可以通过本文详细了解下

    spring MVC + bootstrap实现文件上传示例(带进度条)

    本篇文章主要介绍了spring MVC + bootstrap实现文件上传示例(带进度条),非常具有使用价值,有需要的朋友可以了解一下。

    上传组件开发-基于Bootstrap3

    上传组件功能:多文件上传,多类型文件上传,上传进度监听,附带Bootstrap3中进度条

    bootstrap-fileinput.zip

    一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览,并且...另外,它还包含基于AJAX的上传,拖拽,移除文件的功能,可视化的上传进度条,和可选择的添加或删除文件预览功能。

    Spring Boot+AngularJS+BootStrap实现进度条示例代码

    Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值。然后前台再每隔很小的一段时间去请求这个值。 在AngularJS中,$http...

    bootstrap+springMVC多文件上传

    打包资源中涵盖前后台代码整合以及相应的js等,支持多文件可拖拽式的附件上传。一次选择多个文件到面板中,支持在线预览功能,进度条显示,移除和取消待传文件,以及操作单个文件点击上传等。

    【JavaScript源代码】jQuery+ajax实现文件上传功能.docx

     jQuery+ajax实现文件上传功能(显示文件上传进度),供大家参考,具体内容如下 具体实现步骤 1、定义UI结构,引入bootstrap的CSS文件和jQuery文件 2、给上传按钮绑定点击事件 3、验证是否选择了文件 4、向FormData...

    bootstrap-uploadprogress:用上传进度条装饰HTML表单

    Bootstrap UploadProgress是一个简单的插件,可以将上传进度条添加到上传文件的表单中。 对于大多数没有上载进度指示的浏览器来说,这会有所改善。 入门,文档和示例 错误追踪器 有错误或功能要求吗? 。 版权和许可...

    jquery实现上传文件进度条

    本文实例为大家分享了jquery实现上传文件进度条的具体代码,供大家参考,具体内容如下 首先引入需要的js css 用bootstrap进度条 &lt;link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" &gt; [removed]...

    html5+bootstrap前端框架

    不错的html5的前端框架,集成了完整的bootstrap脚本,可切换8中不同的前端样式; 封装了常用的grid表格、在线编辑器、文件上传、日期控件、进度条、弹出框等。 是UI设计不错的选择。

    upload-demo:由Flask和WebUploader支持的分段上传大文件

    选择文件并上传浏览器访问“ 127.0.0.1:5000/file/list”,点击一个上传的文件进行下载效果文件上传成功文件上传失败技术Python语言,Flask框架WebUploader分片与上传,Bootstrap渲染上传进度条发表大致思路: 下载...

    nodeJs-file-upload:带进度条的 nodeJs 文件上传

    带进度条的 nodeJs 文件上传 带进度条的 nodeJs 中的简单文件上传 使用的技术: NodeJs, expressJs, bootstrap, jquery npm install node app.js 如需演示,请单击此链接

    jmFileUpload:jQuery 多文件 AJAX 文件上传

    jmFileUpload - jQuery 多文件 AJAX 文件上传 jmFileUpload 是一个简单的设置 jQuery 文件上传插件。 该插件依赖于 Bootstrap 3.0 的样式,但您可以更改它以满足您的需要。 事不宜迟,让我们开始如何设置插件。 #...

    bootstrap-fileinput插件

    一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览,并且...另外,它还包含基于AJAX的上传,拖拽,移除文件的功能,可视化的上传进度条,和可选择的添加或删除文件预览功能。

Global site tag (gtag.js) - Google Analytics