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;
　　}
　　[b]配置[/b][b]dwr.xml[/b]
　　放在/WEB-INF/下面[b][/b]
　　
　　
　　
　　
　　
　　
　　
　　
　　[b]web.xml[/b][b]中配置[/b][b]dwr[/b]，省略spring，struts等的配置
　　
　　dwr-invoker
　　DWR Servlet
　　uk.ltd.getahead.dwr.DWRServlet
　　
　　debug
　　false
　　
　　
　　logLevel
　　WARN
　　
　　
　　
　　dwr-invoker
　　/dwr/*
　　
　　[b]编写[/b][b]struts[/b][b]的[/b][b]MultipartRequestHandler[/b]：AjaxMultipartRequestHandler
　　实现 MultipartRequestHandler接口并在struts-config.xml的controller中替换默认的multipartClass
　　
　　
　　
　　其实这个类AjaxMultipartRequestHandler编写很简单，把struts的src源码中的org.apache.struts.upload.CommonsMultipartRequestHandler.java修改一下就可以了[b]：[/b]
　　在[b]public[/b] [b]void[/b] handleRequest(HttpServletRequest request)
　　[b]throws[/b] ServletException {
　　方法中把定义factory之前的那几行代码注释掉然后写入
　　UploadListener listener = [b]new[/b] UploadListener(request, 30);
　　FileItemFactory factory = [b]new[/b] MonitoredDiskFileItemFactory(listener);
　　之后再注释掉
　　// upload.setSizeThreshold((int) getSizeThreshold(ac));
　　// upload.setRepositoryPath(getRepositoryPath(ac));
　　这个类就算写完了
　　[b]编写[/b][b]struts[/b][b]上传类[/b][b][/b]
　　就用你原来编写的struts上传类
　　上传方法代码段示例：
　　/**
　　* 上传文件
　　*/
　　[b]public[/b] ActionForward upload(ActionMapping mapping, ActionForm form,
　　HttpServletRequest request, HttpServletResponse response)
　　[b]throws[/b] Exception {
　　String path = getServlet().getServletContext().getRealPath("/");
　　log.info(">>>>>>>>>>>>>>>path:" + path);
　　[b]if[/b] (form == [b]null[/b]) {
　　[b]return[/b] mapping.findForward("success");
　　}
　　FileUploadForm fuf = (FileUploadForm) form;
　　FormFile file = fuf.getFile();
　　[b]try[/b] {
　　[b]if[/b] (file == [b]null[/b]) {
　　log.info(">>>>>>>>>>>>>>>file为空");
　　[b]return[/b] mapping.findForward("success");
　　}
　　} [b]catch[/b] (Exception e) {
　　e.printStackTrace();
　　}
　　String fname = file.getFileName();
　　[b]int[/b] t = 0;
　　[b]for[/b] ([b]int[/b] i = 0; i 0) {
　　filename = fname.substring(0, t);
　　}
　　log.info(">>>>>>>>>>>>>>>文件名：" + filename);
　　String filepath = path + "dataimport/upfiles/" + fname;
　　File f = [b]new[/b] File(path + "dataimport/upfiles/");
　　log.info(">>>>>>>>>>>>>>>文件生成路径：" + filepath);
　　[b]if[/b] (!f.exists()) {
　　f.mkdirs();
　　} [b]else[/b] {
　　log.info(">>>>>>>>>>>>>>>路径存在");
　　}
　　InputStream stream = file.getInputStream();
　　OutputStream os = [b]new[/b] FileOutputStream(path + "dataimport/upfiles/"
　　+ fname);
　　[b]int[/b] readBytes = 0;
　　[b]byte[/b] buffer[] = [b]new[/b] [b]byte[/b][8192];
　　[b]while[/b] ((readBytes = stream.read(buffer, 0, 8192)) != -1) {
　　os.write(buffer, 0, readBytes);
　　}
　　os.close();
　　stream.close();
　　file.destroy();
　　String message = "成功！";
　　request.setAttribute("message", message);
　　[b]return[/b] 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