dwr+ajax和struts开发文件上传进度条
- 博客分类:
- 技术杂绘
dwr+ajax和struts开发文件上传进度条
2010年01月24日
index.jsp这个是上传页面,upload.jsp负责上传,resources包里面包含了dwr与服务器通讯的javascript脚本,你需要把index.jsp的form中的action换成你的struts action即可,然后把form中的file名改成你actionform中的file属性名,把页面中剩余的file去掉index.jsp上传页面示例代码:
function check_file() {
var strFileName=document.forms(0).file;
if (strFileName.value==""){
alert("请选择要上传的文件");
return false;
}
startProgress();
}
function loadmessage(){
window.alert("");
window.returnValue="yes";
}
上传
/resources/js/upload.js'>
/dwr/interface/UploadMonitor.js'>
/dwr/engine.js'>
/dwr/util.js'>
#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; }
/css/style.css" type="text/css" rel="stylesheet">
/upload.do?method=upload" enctype="multipart/form-data" onSubmit="return check_file()">
从文件导入:
并且要修改一下\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/下面[/b]
[b]web.xml中配置dwr,省略spring,struts等的配置
dwr-invoker
DWR Servlet
uk.ltd.getahead.dwr.DWRServlet
debug
false
logLevel
WARN
dwr-invoker
/dwr/*
编写struts的MultipartRequestHandler:AjaxMultipartRequestHandler
实现 MultipartRequestHandler接口并在struts-config.xml的controller中替换默认的multipartClass
其实这个类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上传类[/b]
就用你原来编写的struts上传类
上传方法代码段示例:
/**
* 上传文件
*/
[b]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 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");
}
*************************************************************************************
利用DWR实现文件上传进度条
来自telio.be的JS:
1
/**//* Licence:
2
* Use this however/wherever you like, just don't blame me if it breaks anything.
3
*
4
* Credit:
5
* If you're nice, you'll leave this bit:
6
*
7
* Class by Pierre-Alexandre Losson -- http://www.telio.be/blog
8
* email : plosson@users.sourceforge.net
9
*/
10
function refreshProgress()
11
{
12
UploadMonitor.getUploadInfo(updateProgress);
13
}
14
15
function updateProgress(uploadInfo)
16
{
17
if (uploadInfo.inProgress)
18
{
19
document.getElementById('uploadbutton').disabled = true;
20
document.getElementById('file1').disabled = true;
21
22
var fileIndex = uploadInfo.fileIndex;
23
24
var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
25
26
document.getElementById('progressBarText').innerHTML = 'upload in progress: ' + progressPercent + '%';
27
28
document.getElementById('progressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
29
30
window.setTimeout('refreshProgress()', 1000);
31
}
32
else
33
{
34
document.getElementById('uploadbutton').disabled = false;
35
document.getElementById('file1').disabled = false;
36
}
37
38
return true;
39
}
40
41
function startProgress()
42
{
43
document.getElementById('progressBar').style.display = 'block';
44
document.getElementById('progressBarText').innerHTML = 'upload in progress: 0%';
45
document.getElementById('uploadbutton').disabled = true;
46
47
// wait a little while to make sure the upload has started ..
48
window.setTimeout("refreshProgress()", 1500);
49
return true;
50
}
51
一个可以有其他页面引用的进度条页面:
1
String path = request.getContextPath();
3
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
4
%>
5
common/js/upload.js">
6
dwr/interface/UploadMonitor.js">
7
dwr/engine.js">
8
dwr/util.js">
9
10
body
{ font: 11px Lucida Grande, Verdana, Arial, Helvetica, sans serif; }
11
#progressBar
{ padding-top: 5px; }
12
#progressBarBox
{ width: 350px; height: 20px; border: 1px inset; background: #eee;}
13
#progressBarBoxContent
{ width: 0; height: 20px; border-right: 1px solid #444; background: #9ACB34; }
14
15
16
17
18
19
20
21
22
23
在dwr.xml 中的配置:
1
2
"http://getahead.ltd.uk/dwr/dwr20.dtd">
4
5
6
7
8
9
10
11
在web.xml中增加如下对DwrServlet的配置:
1
2
dwr-invoker
3
org.directwebremoting.servlet.DwrServlet
4
5
debug
6
false
7
8
9
pollAndCometEnabled
10
true
11
12
13
allowGetForSafariButMakeForgeryEasier
14
true
15
16
2
17
18
19
20
dwr-invoker
21
/dwr/*
22
发表评论
-
WebKit介绍及总结(一)
2012-01-20 01:15 651WebKit介绍及总结(一) 201 ... -
红黑树算法的实现与剖析
2012-01-20 01:15 575红黑树算法的实现与剖析 2011年03月28日 学无止境 ... -
深入static_cast运算符
2012-01-20 01:15 635深入static_cast运算符 2011年03月29日 ... -
动态规划算法
2012-01-20 01:15 675动态规划算法 2011年03 ... -
GPGPU将取代CPU?抢CPU “饭碗”
2012-01-20 01:15 624GPGPU将取代CPU?抢CPU “饭碗” 2011年03月 ... -
2011-3-25
2012-01-19 09:04 9262011-3-25 2011年03月25日 服务站会员注 ... -
WinCE驱动开发问题精华集锦(一)
2012-01-17 01:34 552WinCE驱动开发问题精华 ... -
关键字:volatile
2012-01-17 01:33 641关键字:volatile 2011年03月31日 并不是 ... -
bios英汗翻译
2012-01-17 01:33 619bios英汗翻译 2011年05月2 ... -
volatile――多线程
2012-01-17 01:33 523volatile――多线程 2011 ... -
计算机基础选择题(2)
2012-01-17 01:33 1552计算机基础选择题(2) 20 ... -
Apache Commons fileUpload实现文件上传(一)
2012-01-15 20:19 718Apache Commons fileUpload实现文件上传 ... -
mp3音乐文件上传外链空间精选合辑
2012-01-15 20:19 1041mp3音乐文件上传外链空 ... -
使用apache commons-fileupload.jar 实现文件上传
2012-01-15 20:19 694使用apache commons-fileupload.jar ... -
Struts2中使用uploadify上传文件组件
2012-01-15 20:19 790Struts2中使用uploadify上传文件组件 2009 ... -
Shadowing, Overriding, Hiding and Obscuring
2012-01-11 12:22 758Shadowing, Overriding, Hiding a ... -
1154_java
2012-01-11 12:22 6491154_java 2011年03月01日 impor ... -
Java 开发人员的 Scala 指南: 面向对象的函数编程
2012-01-11 12:22 604Java 开发人员的 Scala 指南: 面向对象的函数编程 ... -
Commons Pool组件
2012-01-11 12:22 685Commons Pool组件 2011年03 ... -
IT生活的血泪史
2012-01-11 12:22 563IT生活的血泪史 2011年03 ...
相关推荐
采用dwr+Ajax和struts开发文件上传进度条(网络文章)
采用dwr+ajax和struts开发文件上传进度条,适合初学者学习,很好的文档,带有例子
DWR+Struts+spring+hibernate的订货系统,自己添加的dwr功能
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年,作为Ajax领域最全面、实用的图书,一直深受读者的好评。全书主要分为三个...
DWR+spring+struts+hibernat整合登陆,一个简单的登陆系统,适合于初学者
dwr+spring+struts+hibernate 整合在一起,代码写的不是很好,可以运行!
EXT + DWR + Struts + Hibernate + Spring Demo
Dwr+Ajax实例和教程,通过struts1.2+spring2.5的整合而成。希望可以帮助到大家。
JAR包+sql+oracle+dwr+jdom+ibatis+struts2
Ext+dwr+Hibernate+struts进销存管理系统终于完工,大家可以看一下
让你轻松,熟悉dwr+ajax+jquery
dwr+ajax无刷新分页,采用dwr技术,实现无刷新分页的功能。
ajax+DWR+实战 ajax+DWR+实战 ajax+DWR+实战 ajax+DWR+实战
Ext+Dwr+Struts+Hibernate_进销存管理系统数据库完整,二次开发的好系统,下载后可以运行,
DWR+HIbernate+jquery+ajax竞拍,一个项目,开发一期
DWR + Servlet 实现文件上传功能 进度条
Dwr+进度条上传文件(支持多文件),可以随意设置上传文件的保存路径,里面有源文件,可以根据自己的需要更改
ajax+dwr+servlet+jQuery开发的网上订餐系统!带有sql数据库!
DWR+jquery2.x+easyUI1.3.x开发富客户端应用