编写监听器以及相关的类
不用自己写了,源码可以从
http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example
里面下载,
下载地址
下载完之后,你需要解包,在命令行中:
jar xvf ajax-upload-1.0.war
源码就在
/WEB-INF/src
下面
将要用到的文件有
resources
文件夹下,
/WEB-INF/
下面的
dwr.xml
和
lib
下面的
jar
文件
上传页面
在上面解开的包里面有
index.jsp
这个是上传页面,
upload.jsp
负责上传,
resources
包里面包含了
dwr
与服务器通讯的
javascript
脚本,你需要把
index.jsp
的
form
中的
action
换成你的
struts action
即可,然后把
form
中的
file
名改成你
actionform
中的
file
属性名,把页面中剩余的
file
去掉
index.jsp
上传页面示例代码:
<%@
page
contentType
=
"text/html; charset=gb2312"
language
=
"java"
import
=
"java.util.*"
errorPage
=
""
%>
<%
String path=request.getContextPath();
%>
<
html
locale
=
"true"
>
<
head
>
<
SCRIPT
language
=
javascript
>
function
check_file()
{
var
strFileName=document.forms(0).file;
if
(strFileName.value==
""
)
{
alert(
"
请选择要上传的文件
"
);
return false
;
}
startProgress();
}
function
loadmessage()
{
<%
if
(request.getAttribute(
"message"
) !=
null
) {
%>
window.alert(
"
<%=
request.getAttribute(
"message"
)
%>
"
);
window.returnValue=
"yes"
;
<%
}
%>
}
</
SCRIPT
>
<
title
>
上传
</
title
>
<
script
src
=
'<%=path%>/resources/js/upload.js'></script>
<
script
src
=
'<%=path%>/dwr/interface/UploadMonitor.js'></script>
<
script
src
=
'<%=path%>/dwr/engine.js'></script>
<
script
src
=
'<%=path%>/dwr/util.js'></script>
<
style
type
=
"text/css"
>
#progressBar { padding-top: 5px; }
#progressBarBox { width: 350px; height: 20px; border: 1px inset; background: #eee;}
#progressBarBoxContent { width: 0; height: 20px; border-right: 1px solid #444; background: blue; }
</style>
<
LINK
href
=
"<%=path%>/css/style.css"type="text/css" rel="stylesheet">
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=gb2312"
>
</
head
>
<
style
type
=
"text/css"
>
<!--
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</
style
>
<
body
leftmargin
=
"0"
topmargin
=
"0"
marginwidth
=
"0"
marginheight
=
"0"
onLoad
=
"loadmessage()"
>
<
form
name
=
"form"
method
=
"post"
action
=
"<%=path%>/upload.do?method=upload"enctype="multipart/form-data" onSubmit="return check_file()">
<
table
width
=
"60%"
border
=
"0"
cellspacing
=
"1"
>
<
tr
background-color
=
" #E7F5FE"
>
<
td
width
=
"30%"
align
=
"right"
>
从文件导入:
</
td
>
<
td
width
=
"51%"
><
input
type
=
"file"
name
=
"file"
class
=
"input"
></
td
>
<
td
width
=
"27%"
><
input
type
=
"submit"
name
=
"files"
class
=
"button_4"
style
=
"border-style:None;width:71px;"
value
=
"
确定
"
id
=
"uploadbutton"
>
</
td
>
</
tr
>
<
tr
align
=
"left"
background-color
=
" #E7F5FE"
>
<
td
colspan
=
"3"
>
<
div
id
=
"progressBar"
style
=
"display: none;"
>
<
div
id
=
"theMeter"
>
<
div
id
=
"progressBarText"
></
div
>
<
div
id
=
"progressBarBox"
>
<
div
id
=
"progressBarBoxContent"
></
div
>
</
div
>
</
div
>
</
div
>
</
td
>
</
tr
>
</
table
>
</
form
>
</
body
>
</
html
>
并且要修改一下
/resources/js
中的
upload.js
文件:
/* Licence:
* Use this however/wherever you like, just don't blame me if it breaks anything.
*
* Credit:
* If you're nice, you'll leave this bit:
*
* Class by Pierre-Alexandre Losson -- http://www.telio.be/blog
* email : plosson@users.sourceforge.net
*/
function refreshProgress()
{
UploadMonitor.getUploadInfo(updateProgress);
}
function updateProgress(uploadInfo)
{
if (uploadInfo.inProgress)
{
document.getElementById('uploadbutton').disabled = true;
document.getElementById('file').disabled = true;
var fileIndex = uploadInfo.fileIndex;
var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
document.getElementById('progressBarText').innerHTML = '
文件读取进度
: ' + progressPercent + '%';
document.getElementById('progressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
window.setTimeout('refreshProgress()', 1000);
}
else
{
document.getElementById('uploadbutton').disabled = false;
document.getElementById('file').disabled = false;
}
return true;
}
function startProgress()
{
document.getElementById('progressBar').style.display = 'block';
document.getElementById('progressBarText').innerHTML = '
文件读取进度
: 0%';
document.getElementById('uploadbutton').disabled = true;
// wait a little while to make sure the upload has started ..
window.setTimeout("refreshProgress()", 1000);
return true;
}
配置
dwr.xml
放在/WEB-INF/下面
<dwr>
<allow>
<create creator="new" javascript="UploadMonitor">
<param name="class" value="be.telio.mediastore.ui.upload.UploadMonitor"/>
</create>
<convert converter="bean" match="be.telio.mediastore.ui.upload.UploadInfo"/>
</allow>
</dwr>
web.xml
中配置
dwr
,省略spring,struts等的配置
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>logLevel</param-name>
<param-value>WARN</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
编写
struts
的
MultipartRequestHandler
:AjaxMultipartRequestHandler
实现 MultipartRequestHandler接口并在struts-config.xml的controller中替换默认的multipartClass
<controller>
<set-property property="multipartClass"
value="org.springside.components.ajaxupload.AjaxMultipartRequestHandler" />
</controller>
其实这个类AjaxMultipartRequestHandler编写很简单,把struts的src源码中的org.apache.struts.upload.CommonsMultipartRequestHandler.java修改一下就可以了:
在
public
void
handleRequest(HttpServletRequest request)
throws
ServletException {
方法中把定义
factory
之前的那几行代码注释掉然后写入
UploadListener listener =
new
UploadListener(request, 30);
FileItemFactory factory =
new
MonitoredDiskFileItemFactory(
listener
);
之后再注释掉
// upload.setSizeThreshold((int) getSizeThreshold(ac));
// upload.setRepositoryPath(getRepositoryPath(ac));
这个类就算写完了
编写
struts
上传类
就用你原来编写的
struts
上传类
上传方法代码段示例:
/**
*
上传文件
*/
public
ActionForward upload(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws
Exception {
String path = getServlet().getServletContext().getRealPath(
"/"
);
log
.info(
">>>>>>>>>>>>>>>path:"
+ path);
if
(form ==
null
) {
return
mapping.findForward(
"success"
);
}
FileUploadForm fuf = (FileUploadForm) form;
FormFile file = fuf.getFile();
try
{
if
(file ==
null
) {
log
.info(
">>>>>>>>>>>>>>>file
为空
"
);
return
mapping.findForward(
"success"
);
}
}
catch
(Exception e) {
e.printStackTrace();
}
String fname = file.getFileName();
int
t = 0;
for
(
int
i = 0; i < fname.length(); i++) {
if
(fname.charAt(i) ==
'.'
) {
t = i;
}
}
String filename =
null
;
if
(t > 0) {
filename = fname.substring(0, t);
}
log
.info(
">>>>>>>>>>>>>>>
文件名:
"
+ filename);
String filepath = path +
"dataimport/upfiles/"
+ fname;
File f =
new
File(path +
"dataimport/upfiles/"
);
log
.info(
">>>>>>>>>>>>>>>
文件生成路径:
"
+ filepath);
if
(!f.exists()) {
f.mkdirs();
}
else
{
log
.info(
">>>>>>>>>>>>>>>
路径存在
"
);
}
InputStream stream = file.getInputStream();
OutputStream os =
new
FileOutputStream(path +
"dataimport/upfiles/"
+ fname);
int
readBytes = 0;
byte
buffer[] =
new
byte
[8192];
while
((readBytes = stream.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, readBytes);
}
os.close();
stream.close();
file.destroy();
String message =
"
成功!
"
;
request.setAttribute(
"message"
, message);
return
mapping
.findForward(
"success"
);
}
原文作者:volcano_hosan