- 浏览: 1611180 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
实现文件上传的进度显示,我们先看看都有哪些问题我们要解决。
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 (Exceptione) ... {
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下面我们来看上传的处理部分
// 增加了侦听进度的代码
UploadListeneruploadListener = new UploadListener();
// 这句话我们后面再讨论,这个可是关键
session.setAttribute( " uploadListener " ,uploadListener);
uploadListener.setDelay( 0 );
uploadListener.setDebug( true );
upload.setUploadListener(uploadListener);
upload.parse();
// 这句话同样重要,我们后面再讨论
session.setAttribute( " uploadListener " , null );
4我们再看上传的表单部分
functioncheckForm() ... {
$( " SHOW_FRAME " ).src = " link.jsp " ;
$( ' SUBMIT ' ).disabled = true ;
Ext.MessageBox.show( ... {
title: ' Pleasewait... ' ,
msg: ' Initializing... ' ,
width: 240 ,
progress: true ,
closable: false
} );
$( " MAIN_FORM " ).submit();
return false ;
}
functionsetUploadProcess(total,current) ... {
varrate = Number(current) / Number(total);
Ext.MessageBox.updateProgress(rate, ' Uploading... ' + current + " / " + total);
if (Number(current) >= Number(total)) ... {
closeUploadProcess();
}
}
functioncloseUploadProcess() ... {
Ext.MessageBox.hide();
}
</ script >
< iframename = " ACTION_FRAME " id = " ACTION_FRAME " width = " 0 " height = " 0 " ></ iframe >
< iframename = " SHOW_FRAME " id = " SHOW_FRAME " width = " 0 " height = " 0 " ></ iframe >
< formmethod = " OST " id = " MAIN_FORM " onsubmit = " returncheckForm() " enctype = " multipart/form-data "
action = " uploadFileSave.jsp " target = " ACTION_FRAME " >
< inputtype = " file " size = " 50 " name = " file " >
< inputtype = " submit " ID = " SUBMIT " value = " UploadIt " >
</ form >
第一个iframe用于提交表单数据,第二个就是我们用来获取处理数据进度信息的。
提交表单很简单,target指向了我们的第一个iframe
我们看一下JS
checkForm里面第一句就是关键的读取进度信息的页面,我们在第二个iframe里面获得。然后就是弹出进度的显示框,我使用了Ext.然后提交上传表单
setUploadProcess用来更新进度框上面的数据,第一个参数是数据总共的大小,第二个参数是已经处理的大小。
closeUploadProcess关闭进度框
5最后,我们来看读取进度信息的页面
<% @includefile = " ../package.inc.jsp " %>
<%
response.setHeader( " ragma " , " no-cache " );
response.setHeader( " Cache-Control " , " no-cache " );
response.setDateHeader( " Expires " , 0 );
response.setBufferSize( 0 );
UploadListeneruploadListener = null ;
while (uploadListener == null || uploadListener.getTotalCurrent() <= 0 ) ... {
uploadListener = (UploadListener)session.getAttribute( " uploadListener " );
out.print( " . " );
out.flush();
Thread.sleep( 10 );
}
long total = uploadListener.getTotal();
out.println(total);
long current;
out.flush();
while ( true ) ... {
current = uploadListener.getTotalCurrent();
if (current >= total) ... {
break ;
}
out.println( " <scripttype='text/javascript'>parent.setUploadProcess(' " + total + " ',' " + current + " ');</script> " );
out.flush();
Thread.sleep( 10 );
}
%>< scripttype = " text/javascript " > parent.closeUploadProcess(); </ script >
其中前面的循环,用来判断是否产生了上传的信息,如果没有则等待。
然后就是读取上传的信息,并计算后生成调用上级窗口的更新进度条的JS,请注意out.print后面必须跟上out.flush,否则不会持续输出到客户端,也就不会看到连续的进度条变化。
总结:
上面的部分比较乱,我这里总结一下关键点。
1在上传组件里面,把总大小和当前读取了的大小放到一个类里面,并持续更新,直到处理完毕
2上传的进度类,放在session里面,供进度读取页面读取
3进度读取页面,从session里面拿到数据,并返回结果。
有几个疑问解释一下。
1由于Http协议决定了,必须等request处理完毕才会返回输出,所以不能在upload页面里进行处理进度的显示。我前面测试到1M左右的文件不成功,就是没有考虑到这个问题。所以必须单独用一个GET的程序进行读取
2读取是一个持续不断的过程,因为上传大文件是很慢的!
3如果你的应用服务器启用了GZIP压缩,是容器管理的,那么很不幸,因为容易必须拿到所有的数据,至少是一部分数据才会返回,所以造成我们返回的那些很少的字节经常会被截住,造成无法显示上传的连续过程。
解决方法
1)关闭GZIP,我想许多人不会这么做
2)使用自定义的GZIP压缩,判断某些东西(比如URL),对他们不进行压缩处理
测试和下载地址:http://www.java2000.net/test/testUploadFile.jsp
发表评论
-
使用Java 动态代理实现AOP
2009-07-22 14:29 584目前整个开发社区对AOP(Aspect Oriented P ... -
Java中用动态代理类实现记忆功能
2009-07-22 14:30 687记忆是衍生自lisp,python, ... -
JAVA动态代理实现方法
2009-07-22 14:31 670在目前的Java开发包中包含了对动态代理的支持,但是其实现只支 ... -
对代理模式与Java动态代理类的理解(转)
2009-07-22 14:32 7461. 代理模式 代理模式的作用是:为其他对象 ... -
十年与java 相关的名字
2009-07-22 17:12 712RickardOberg:J2EE奇才 文/ ... -
搞懂java中的synchronized关键字
2009-07-28 17:48 589实际上,我关于java的基 ... -
Javascript评估用户输入密码的强度的方法 代码
2009-07-28 17:50 681用Javascript评估用户输入密码的强度密码已经是我们生活 ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 929<td align="center" ... -
字符串转化为unicode编码
2009-07-31 16:16 870package com.util; import java. ... -
移位运算符的规则及其数学意义
2009-07-31 18:02 738移位运算符就是在二进制的基础上对数字进行平移。按照平移的方 ... -
几个谜题,深入的了解java
2009-08-03 17:02 707在2009年的JavaOne大会上,Joshua Bloch和 ... -
解开JavaScript生命的达芬奇密码
2009-08-05 17:56 719解开JavaScript生命的达芬奇密码 ——如何使用Jav ... -
掌控上传进度的AJAX Upload(转贴)
2009-08-05 17:59 693掌控上传进度的AJAX Uploa ... -
一、我对java中编码的理解(摘)
2009-08-06 09:17 6041. 编码的产生 对电 ... -
四、深入下package,import:(摘)
2009-08-06 09:18 682注:因package,import涉及较多内容,另开一个帖子了 ... -
三、我对java中类路径的理解(摘)
2009-08-06 09:18 504Java中的类路径分“编译后的存放路径” 和 “运行时的查找路 ... -
二、我对java中类装载的理解(摘)
2009-08-06 09:18 7521.Java中的所有类,必须 ... -
java class文件格式解析(摘)
2009-08-06 09:19 7741.目的 ... -
关于 JavaBean 规范你还是应该知道的二三事
2009-08-06 09:22 798作为 Java 程序员,对于 JavaBean 也许你会说再熟 ... -
synchronized(this)的几个简单示例
2009-08-06 10:31 790一、当两个并发线程访问同一个对象object中的这个synch ...
相关推荐
主要为大家详细介绍了Java动态显示文件上传进度实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
* 可以显示上传进度; * 良好的浏览器兼容性; * 兼容其他JavaScript库 (例如:jQuery, Prototype等); * 支持Flash 8和Flash 9; SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以...
本篇文章主要介绍了JavaWeb项目实现文件上传动态显示进度实例,具有一定的参考价值,有兴趣的可以了解一下。
jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 特征: 1、多文件上传: 允许一次选择...
一直想做一款后台管理系统,看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统。她可以用于所有的Web应用程
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和
EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器,处理图片上传和