实现文件上传的进度显示,我们先看看都有哪些问题我们要解决。
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下面我们来看上传的处理部分
Uploadupload
=
new
Upload(request);
//
增加了侦听进度的代码
UploadListeneruploadListener
=
new
UploadListener();
//
这句话我们后面再讨论,这个可是关键
session.setAttribute(
"
uploadListener
"
,uploadListener);
uploadListener.setDelay(
0
);
uploadListener.setDebug(
true
);
upload.setUploadListener(uploadListener);
upload.parse();
//
这句话同样重要,我们后面再讨论
session.setAttribute(
"
uploadListener
"
,
null
);
4我们再看上传的表单部分
<
scripttype
=
"
text/javascript
"
>
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最后,我们来看读取进度信息的页面
<%
@pagelanguage
=
"
java
"
contentType
=
"
text/html;charset=utf-8
"
pageEncoding
=
"
utf-8
"
%>
<%
@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动态显示文件上传进度实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
* 可以显示上传进度; * 良好的浏览器兼容性; * 兼容其他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富文本编辑器,处理图片上传和