`
java2000.net
  • 浏览: 633147 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

Java动态显示文件上传进度的简单实现

阅读更多

实现文件上传的进度显示,我们先看看都有哪些问题我们要解决。

1 上传数据的处理进度跟踪
2 进度数据在用户页面的显示
就这么2个问题,

第一个问题,主要是组件的选择
必须支持数据处理侦听或通知的组件。当然,我肯定只用我自己的组件啦。基本原理是

1 使用request.getContentLength() 读取到处理数据的总长度,注意这个长度不等于文件的长度,因为Base64等编码会增加数据量,如果超过了允许的长度,直接返回-1;

2 在每读取一部分数据时(比如一行,或者64K,或者你自定义的字节数),将读取的字节数通知我们的进度跟踪程序。我取名为 UploadListener代码如下

/** *//** 
* 处理附件上传的通知。 

* 各位可以继承这个类,来实现自己的特殊处理。 
*  
@author 赵学庆 www.java2000.net 
*/
 
public class UploadListener ...
  
// 调试模式将在控制台打印出一些数据 
  private boolean debug; 

  
// 总数据字节数 
  private int total; 

  
// 当前已经处理的数据字节数 
  private int totalCurrent = 0

  
// 延迟,用来调试用,免得速度太快,根本卡看不到进度 
  private int delay = 0

  
/** *//** 
   * 处理数据通知的方法。 

   * 保存已经处理的数据。并且在一定的比例进行延迟。默认每1% 

   * 如果不需用延迟,可以删掉内部的代码,加快速度。 
   *  
   * 
@param size 增加的字节数 
   
*/
 
  
public void increaseTotalCurrent(long size) ...
    
this.totalCurrent += size; 
    
try ...
      currentRate 
= totalCurrent * 100 / total; 
      
if (currentRate > lastRate) ...
        
if (delay > 0...
          Thread.sleep(delay); 
        }
 
        
if (debug) ...
          System.out.println(
"rate=" + totalCurrent + "/" + total + "/" + (totalCurrent * 100 / total)); 
        }
 
        lastRate 
= currentRate; 
      }
 
    }
 catch (Exception e) ...
      e.printStackTrace(); 
    }
 
  }
 

  
/** *//** 
   * 读取全部自己数 
   *  
   * 
@return 
   
*/
 
  
public int getTotal() ...
    
return total; 
  }
 

  
/** *//** 
   * 读取已经处理的字节数 
   *  
   * 
@return 
   
*/
 
  
public int getTotalCurrent() ...
    
return totalCurrent; 
  }
 

  
private long lastRate = 0

  
private long currentRate = 0

  
public int getDelay() ...
    
return delay; 
  }
 

  
public void setDelay(int delay) ...
    
this.delay = delay; 
  }
 

  
public void setTotal(int total) ...
    
this.total = total; 
  }
 

  
public boolean isDebug() ...
    
return debug; 
  }
 

  
public void setDebug(boolean debug) ...
    
this.debug = debug; 
  }
 
}

 3 下面我们来看上传的处理部分
  Upload upload = new Upload(request); 
  
// 增加了侦听进度的代码 
  UploadListener uploadListener = new UploadListener(); 
  
// 这句话我们后面再讨论,这个可是关键 
  session.setAttribute("uploadListener",uploadListener); 
  uploadListener.setDelay(
0); 
  uploadListener.setDebug(
true); 
  upload.setUploadListener(uploadListener); 
  upload.parse(); 
  
// 这句话同样重要,我们后面再讨论 
  session.setAttribute("uploadListener",null);
4 我们再看上传的表单部分
<script type="text/javascript"> 
function checkForm()
...
  $(
"SHOW_FRAME").src="link.jsp"
  $(
'SUBMIT').disabled=true
  Ext.MessageBox.show(
...
    title: 
'Please wait...'
    msg: 
'Initializing...'
    width:
240
    progress:
true
    closable:
false 
  }
); 
  $(
"MAIN_FORM").submit(); 
  
return false
}
 
function setUploadProcess(total,current)
...
  var rate 
= Number(current)/Number(total); 
  Ext.MessageBox.updateProgress(rate,
'Uploading...'+current+"/"+total); 
  
if(Number(current)>=Number(total))...
    closeUploadProcess(); 
  }
 
}
 
function closeUploadProcess()
...
  Ext.MessageBox.hide(); 
}
 
</script> 
<iframe name="ACTION_FRAME" id="ACTION_FRAME" width="0" height="0"></iframe> 
<iframe name="SHOW_FRAME" id="SHOW_FRAME" width="0" height="0"></iframe> 
<form method="OST" id="MAIN_FORM" onsubmit="return checkForm()" enctype="multipart/form-data"  
  action
="uploadFileSave.jsp" target="ACTION_FRAME"> 
  
<input type="file" size="50" name="file">  
  
<input  type="submit" ID="SUBMIT" value="Upload It"> 
</form>
第一个iframe用于提交表单数据,第二个就是我们用来获取处理数据进度信息的。
提交表单很简单,target指向了我们的第一个iframe
我们看一下JS
checkForm 里面第一句就是关键的读取进度信息的页面,我们在第二个iframe里面获得。然后就是弹出进度的显示框,我使用了Ext. 然后提交上传表单
setUploadProcess 用来更新进度框上面的数据,第一个参数是数据总共的大小,第二个参数是已经处理的大小。
closeUploadProcess 关闭进度框

5 最后,我们来看读取进度信息的页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 
<%@include file="../package.inc.jsp"%> 
<% 
  response.setHeader(
"</sp>
分享到:
评论

相关推荐

    Java动态显示文件上传进度实现代码

    主要为大家详细介绍了Java动态显示文件上传进度实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    SWFUpload 大文件上传 java

    * 可以显示上传进度; * 良好的浏览器兼容性; * 兼容其他JavaScript库 (例如:jQuery, Prototype等); * 支持Flash 8和Flash 9; SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以...

    JavaWeb项目实现文件上传动态显示进度实例

    本篇文章主要介绍了JavaWeb项目实现文件上传动态显示进度实例,具有一定的参考价值,有兴趣的可以了解一下。

    jQuery File Upload文件上传插件-其他

    jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 特征: 1、多文件上传: 允许一次选择...

    若依后台管理系统 v2.2

    一直想做一款后台管理系统,看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统。她可以用于所有的Web应用程

    积分管理系统java源码-production_ssm_erp:生产_ssm_erp

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-springboot:弹簧靴

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-production_ssm:二维码推广管理系统

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-management_sys:管理系统

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-web:网络

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-ssm:ssm

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-erpjinxiaocun:erpjinxiaocun

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-MettingNi:镍

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-Production_SSM:生产_SSM

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-production_ssm:生产_ssm

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-ld_erp:莱达电子商务ERP系统

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-Production-SSM-Master:生产-SSM-Master

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

    积分管理系统java源码-production_ms:一个SSM架构的ERP管理系统

    EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和

Global site tag (gtag.js) - Google Analytics