`
heichong
  • 浏览: 45764 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DWR3 文件上传显示进度条

    博客分类：
  • DWR3
dwr 上传 下载 进度条 java 
阅读更多
最近刚开始学dwr，发现使用起来确实方便多了。现在公司正好有需求要使用文件上传，所以就研究了一下dwr3的文件上传和下载。

上传很方便，但是要显示进度条，我没找到相关的接口，我觉得dwr3应该会提供一个方便的接口用来显示进度条，后来研究dwr3的源码，发现在上传文件时，发现有下面的一段代码 
if (session != null)
        {
            fileUploader.setProgressListener(new SessionProgressListener(session));
            session.setAttribute(SessionProgressListener.CANCEL_UPLOAD, null);
            session.setAttribute(PROGRESS_LISTENER, fileUploader.getProgressListener());
        }


这里set了一个进度监听，并且放到session中，于是我就打算不断的从session中获取这个SessionProgressListener，然后使用dwr3推送技术，调用前台的js来改变进度条。

这就是我大概实现的思路，虽然我觉得这样很笨，但是我目前只能这样来获取上次的进度，不知道各位大侠有没有更好的办法。

下面是相关的代码：
1.前台： 
<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<%@ include file="/jsp/common/include.jsp"%>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>DWR HELLO</title>
		<style type="text/css">
		.ProgressBar {
		    position: relative;
		    width: 350px;    /* 宽度 */
		    border: 1px solid #B1D632;
		    padding: 1px;
			text-align:left;
		}
		.ProgressBar div {
		    display: block;
		    position: relative;
		    background: #B1D632;
		    color: #333333;
		    height: 20px; /* 高度 */
		    line-height: 20px;  /* 必须和高度一致，文本才能垂直居中 */
			text-align:left;
		}
		.ProgressBar div span { 
		    position: absolute;
		    width: 350px; /* 宽度 */
		    text-align: center;
		    font-weight: bold;
		}
	</style>

		<script type='text/javascript' src='${contextPath }/dwr/engine.js'> </script>
		<script type='text/javascript' src='${contextPath }/dwr/util.js'> </script>
		<script type='text/javascript'
			src='${contextPath }/dwr/interface/FileUpload.js'> </script>
		<script type='text/javascript'
			src='${contextPath }/dwr/interface/UploadListener.js'> </script>

		<script type='text/javascript'
			src='${contextPath }/js/dwrjs/dwrHelper.js'> </script>
		<script type='text/javascript'
			src='${contextPath }/js/dwrjs/upload.js'> </script>
		<script type='text/javascript'
			src='${contextPath }/js/zdialog/zDrag.js'> </script>
		<script type='text/javascript'
			src='${contextPath }/js/zdialog/zDialog.js'> </script>

		<script type="text/javascript">
		
			function addFile(){  
				if($("#uploadFile").val()==null || $("#uploadFile").val().length <= 0){
					return ;
				}
			    var uploadFile = dwr.util.getValue("uploadFile"); 
				//初始化上传信息
				progressBarInit($("#uploadFile").val());  
				//显示上传进度信息
			    showDialog();
			    //DWR3 文件上传
			    FileUpload.upload(uploadFile, {
					callback : function(data){
						 Dialog.close();
				    	$("#file_list").html($("#file_list").html()+"<a href='javascript:void(0);' onclick='downloadFile(\"" + data + "\")'>" + data + "</a><br>");
				    }
				});
			    //开始监听上传数据 0.6秒推送一次
			    UploadListener.listener();
			}
			/**
			**只能下载小文件，寻求解决方法
			*/
			function downloadFile(data) {
				//alert(data);
		       	FileUpload.download(data, function(data) { 
		       		//alert(data); 
		       		dwr.engine.openInDownload(data);
		       	});
		   }
		   
			/**
			**利用弹出插件，显示进度
			*/
			function showDialog(){
				
				var diag = new Dialog();
				diag.Width = 400;
				diag.Height = 300;
				diag.Title = "上传信息";
				diag.InvokeElementId="upload_info" ;
				diag.ShowCloseButton = false ;
				//diag.OKEvent = function(){};//点击确定后调用的方法
				diag.show();
			}
		</script>
	</head>
	<body onload="reverseAjax();">
		<p>
			<input type="file" name="uploadFile" id="uploadFile" />

			<input type="button" onclick="addFile()" value="上传" />
		</p>
		 <table>
		 	<tr><td id="file_list"></td></tr>
		 </table>
		 <table id="upload_info" style="width:400px;text-align:left;display:none;">
		 	<tr>
		 		<td width="30%">上传文件名：</td>
		 		<td><span id="upload_file_name">&nbsp;</span></td>
		 	</tr>
		 	<tr>
		 		<td>文件总大小：</td>
		 		<td><span id="upload_file_size">0 KB</span></td>
		 	</tr>
		 	<tr>
		 		<td>上传用时：</td>
		 		<td><span id="upload_time">0 秒</span></td>
		 	</tr>
		 	<tr>
		 		<td>上传速度：</td>
		 		<td><span id="upload_speed">0 KB/s</span></td>
		 	</tr>
		 	<tr><td id="upload_text" colspan="2">文件上传中,请稍等……</td></tr>
		 	<tr>
		 		<td colspan="2">
				<div class="ProgressBar">
					<div id="progress_bar" style="width: 0%;">
						<span id="progress_percent">0%</span>
					</div>
				</div>
				</td>
			</tr>
		 </table>
	</body>
</html>


其中 upload.js 代码如下： 
/**
* @zongb
*/
var $$ = function (id){return document.getElementById(id)} ;

function updateProgress(uploadInfo){
   
	var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
    var secondsElapsed = Math.ceil(uploadInfo.deltaTime/1000);
    var speed = Math.ceil(uploadInfo.bytesRead / (uploadInfo.deltaTime/1000 * 1024));
    
   	 //$$('upload_file_name').innerHTML = uploadInfo.curFileName  ;
    
    $$('upload_file_size').innerHTML =Math.ceil(uploadInfo.totalSize/1024) + ' KB';
    
    $$('upload_time').innerHTML = secondsElapsed + " 秒" ;
    
    $$('upload_speed').innerHTML =  speed + " KB/s";

    $$('progress_bar').style.width = parseInt(progressPercent * 3.5) + 'px';
    
    $$('progress_percent').innerHTML = progressPercent + "%" ;
    
    if(progressPercent==100){
    	$$('upload_text').innerHTML =  "处理文件中,请稍后……";
    }else{
    	$$('upload_text').innerHTML =  "文件上传中,请稍等……";
    }
    
}
/**
* 初始化上传信息
*/
function progressBarInit(uploadFile){
	
	var filename = uploadFile.substring(uploadFile.lastIndexOf("\\")+1,uploadFile.length) ;
	
   	$$('upload_file_name').innerHTML = filename  ;
    
    $$('upload_file_size').innerHTML ='0 KB';
    
    $$('upload_time').innerHTML = "0 秒" ;
    
    $$('upload_speed').innerHTML =  "0 KB/s";

    $$('progress_bar').style.width = '0px';
    
    $$('progress_percent').innerHTML =  "0%" ;
}

function reverseAjax() {
	  dwr.engine.setActiveReverseAjax(true);
}



dwrHelper.js只是一个针对dwr3错误处理
zDrag.js 和 zDialog.js 是用的一个弹出框插件，附件中会列出的

2.然后是dwr3的配置文件（web.xml怎么配置的我就不写了） 
    <create creator="new" javascript="FileUpload">
      <param name="class" value="com.method.dwr.Upload"/>
    </create>
    <create creator="new" javascript="UploadListener" scope="script">
      <param name="class" value="com.method.dwr.TestProgress"/>
    </create>
     <convert converter="bean" match="com.method.dwr.util.fileUpload.ProgressInfo"/>



3.java代码
供前台调用的类 
package com.method.dwr;


import org.apache.log4j.Logger;
import org.directwebremoting.io.FileTransfer;

import com.method.dwr.util.exception.ExceptionValidate;
import com.method.dwr.util.fileUpload.FileUpload;
import com.method.dwr.util.fileUpload.ProgressInfo;


public class Upload {
	
	public static Logger log = Logger.getLogger(Upload.class) ;

	private ProgressInfo pi = null;
	
	private FileUpload upload = null ;
	/**
	 * 	DWR 单文件上传
	 *  页面编码必须使用GBK，否则上传文件名为中文时，会出现乱码
	 * @return
	 * @throws Exception 
	 */
	public String upload(FileTransfer fileTransfer) throws Exception {
		log.info("=======================") ;
		upload = new FileUpload();
		return upload.upload(fileTransfer,50,"/upload");
	}
	
	/**
	 * 文件下载
	 * 	在IE下，中文文件名会有乱码出现，待解决。
	 * @param fileName
	 * @return
	 * @throws Exception
	 */
	public FileTransfer download(String fileName)  throws Exception{
		upload = new FileUpload();
		return upload.download(fileName,"/upload");
	}
}



dwr3上传文件的类 
package com.method.dwr.util.fileUpload;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.InputStream;

import org.apache.log4j.Logger;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.io.FileTransfer;

import com.method.dwr.util.exception.ExceptionValidate;


public class FileUpload {
	
	public static Logger log = Logger.getLogger(FileUpload.class) ;

	private WebContext wctx = null;
	/**
	 * 	DWR 单文件上传
	 *  页面编码必须使用GBK，否则上传文件名为中文时，会出现乱码
	 * @param fileTransfer
	 * @param maxSizeWithM  允许上传的最大文件
	 * @param savePath		文件保存的路径(/upload)
	 * @return
	 * @throws Exception
	 */
	public String upload(FileTransfer fileTransfer,int maxSizeWithM,String savePath) throws Exception {
	
		if(maxSizeWithM != 0 && fileTransfer.getSize() > 1024*1024*maxSizeWithM){
			//throw new ExceptionValidate("提示：您上传的单个文件不能超过" + maxSizeWithM + "M ！") ;
		}
		
		wctx = WebContextFactory.get();
				
        log.info("----------"+fileTransfer.getSize()) ;
		
        //存储的绝对路径
		String saveurl = wctx.getHttpServletRequest().getSession()
				.getServletContext().getRealPath(savePath);
		
		log.info("----------" + saveurl) ;
		
		String fileName = new String(fileTransfer.getFilename().getBytes(),"GBK");
		//文件名
		fileName = fileName.substring(fileName.lastIndexOf(java.io.File.separator)+1) ;
		
		log.info("-------fileName---" + fileName) ;
		
		File file = new File(saveurl + java.io.File.separator + fileName);
		
		if (!file.getParentFile().exists()) {
			file.getParentFile().mkdirs();
		}
		
		//开始读取文件
		byte[] bytes = new byte[1024*10];
		
        FileOutputStream foutput = new FileOutputStream(file);   
      
        BufferedOutputStream Buff = new BufferedOutputStream(foutput);
        
        InputStream fis = fileTransfer.getInputStream();

        int len=0;
        while((len=fis.read(bytes))>0)
        {
        	Buff.write(bytes,0,len); 
           
        }
        Buff.flush();
        Buff.close();
        foutput.close();   
        fis.close();    

		log.info("-----文件上传结束-----") ;
		return fileName;
	}
	
	/**
	 * 文件下载
	 * 	在IE下，中文文件名会有乱码出现，待解决。
	 * @param fileName
	 * @return
	 * @throws Exception
	 */
	public FileTransfer download(String fileName,String savePath)  throws Exception{
		
		
		wctx = WebContextFactory.get();
		// String realtivepath = webContext.getServletContext().getContextPath()
		// + "/upload/";

		log.info("-------fileName-1111--" + fileName) ;
		
		String saveurl = wctx.getHttpServletRequest().getSession()
				.getServletContext().getRealPath(savePath);
		if (fileName == null || fileName.length() == 0) {  
			fileName = "[BLANK]";  
        }  
        BufferedInputStream in;
		try {
			in = new BufferedInputStream(new FileInputStream(saveurl + java.io.File.separator + fileName));
		} catch (FileNotFoundException e) {
			// TODO Auto-generated catch block
			throw new ExceptionValidate("您要下载的文件：[" + fileName + "]不存在！");
		}
		
        ByteArrayOutputStream out = new ByteArrayOutputStream();  
        byte[] temp = new byte[1024*10];  
        int size = 0;    
        while ((size = in.read(temp)) != -1)  
        {  
        	out.write(temp, 0, size);  
        }

        //log.info(new String(out.toByteArray(),"ISO8859-1"));
        return new FileTransfer(new String(fileName.getBytes("UTF-8"),"ISO8859-1"),null,out.toByteArray());  
		
	}
}



这个是存储进度条信息的类 

package com.method.dwr.util.fileUpload;

import java.util.ArrayList;


public class ProgressInfo
{
    private long totalSize = 0;
    private long bytesRead = 0;
    private int fileIndex = 0;
    private long startTime = System.currentTimeMillis();
    private long deltaTime = 0;
    private String uploadedFiles = "";
    
    private boolean isInProgress = true;
    private boolean isCompleted = false;
    
    private String curFileName = "";
    private String errorMsg = "";

    
	public String getErrorMsg() {
		return errorMsg;
	}

	public void setErrorMsg(String errorMsg) {
		this.errorMsg = errorMsg;
	}

	public String getCurFileName() {
		return curFileName;
	}

	public void setCurFileName(String curFileName) {
		this.curFileName = curFileName;
	}

	public String getUploadedFiles() {
		return uploadedFiles;
	}

	public void setUploadedFiles(String uploadedFiles) {
		this.uploadedFiles = uploadedFiles;
	}

	public long getStartTime() {
		return startTime;
	}

	public void setStartTime(long startTime) {
		this.startTime = startTime;
	}

	public void setDeltaTime(long deltaTime) {
		this.deltaTime = deltaTime;
	}

	public ProgressInfo()
    {
    }

    public long getTotalSize()
    {
        return totalSize;
    }

    public void setTotalSize(long totalSize)
    {
        this.totalSize = totalSize;
    }

    public long getBytesRead()
    {
        return bytesRead;
    }

    public void setBytesRead(long bytesRead)
    {
        this.bytesRead = bytesRead;
    }

    public long getDeltaTime()
    {
        return System.currentTimeMillis() - this.startTime;
    }

    public boolean isInProgress()
    {
        return isInProgress;
    }

    public int getFileIndex()
    {
        return fileIndex;
    }

    public void setFileIndex(int fileIndex)
    {
        this.fileIndex = fileIndex;
    }

	public boolean isCompleted() {
		return isCompleted;
	}

	public void setCompleted(boolean isCompleted) {
		this.isCompleted = isCompleted;
		this.isInProgress = false;
		
	}

	public void setInProgress(boolean isInProgress) {
		this.isInProgress = isInProgress;
	}
}





上面的方法中，有dwr3的下载方法，我的理解是，这个下载方法，是先把文件一次读取到内存中，再在页面中提供下载，这样有个问题：无法下载大文件，不知道各位有没有更好的方法

如果大家有什么更好的建议，希望能提出来，大家一起分享

谢谢！
分享到：
| 如何用js给html表单设置style
评论
1 楼 summa427 2017-06-08  
TestProgress 这个java类哪去了 麻烦贴出来下谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    利用DWR实现文件上传进度条

    总的来说，通过DWR，我们可以轻松地实现在Web应用中展示文件上传的进度条，提高用户体验。关键在于利用DWR的实时通信能力，以及在前端和后端之间有效地传递和处理文件上传状态信息。在实际开发中，还需要考虑错误...

    Strues2-Dwr 带进度条文件上传

    Struts2-DWR带进度条文件上传是一种在Web应用程序中实现大文件上传并显示实时进度条的技术组合。Struts2是一个流行的Java MVC框架，用于构建企业级Web应用，而DWR（Direct Web Remoting）是一个JavaScript库，允许在...

    dwr实现无刷新带进度条多文件上传（java版）

    在本项目中，"dwr实现无刷新带进度条多文件上传（java版）"，主要展示了如何利用DWR来创建一个用户友好的文件上传功能，该功能可以在上传过程中显示进度条，提升用户体验。 1. **DWR基础**：DWR允许JavaScript直接...

    dwr上传文件带进度条

    dwr上传文件带进度条!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Dwr+进度条上传文件(支持多文件)

    通过以上知识点，我们可以了解到这个项目是一个完整的DWR文件上传解决方案，包含前后端的全部实现，并且具有良好的可定制性。对于希望在Web应用中实现类似功能的开发者来说，这是一个有价值的参考和起点。

    采用dwr+Ajax和struts开发文件上传进度条(网络文章)

    采用dwr+Ajax和struts开发文件上传进度条(网络文章)

    带进度条的文件上传源代码

    具体到这个“带进度条的文件上传源代码”，它利用AJAX和DWR实现了一个动态更新的进度条，用户选择文件后，前端会立即显示一个进度条，展示文件上传的百分比。这个过程是通过监听HTTP请求的进度事件完成的，当服务器...

    采用dwr和struts上传进度条

    本文将深入探讨如何使用DWR（Direct Web Remoting）和Struts框架实现文件上传进度条功能。 ### DWR：Direct Web Remoting DWR是一种开源技术，它简化了Java与JavaScript之间的远程调用过程，使得在Web应用中使用...

    FileUpload+DWR 多文件上传实例

    原理： FileUpload实现上传功能， UploadListener 监听上传进度， DWR push (Reverse Ajax) 进度信息并更新页面， 实现无刷新多文件上传 运行环境： Tomcat 5/6 测试通过 说明：累计上传文件不超过10M（可以更改...

    DWR实现DEMO

    DWR（Direct Web Remoting）是一个web远程调用框架，利用这个框架可以让AJAX变得很简单，通过DWR可以在客户端通过JavaScript直接调用服务器的Java方法并返回值给JavaScript，整个过程就好像通过本地客户端调用一样，...

    dwr操作文件上传下载

    `demo.rar`可能包含了DWR文件上传下载的基本示例代码，可能包括前端JavaScript调用DWR的方法，以及后端Java处理文件的Servlet或Controller。 7. **DWRExcel和excel.rar** 这两个文件可能提供了使用DWR处理Excel...

    采用dwr+ajax和struts开发文件上传进度条

    通过结合DWR（Direct Web Remoting）、AJAX（Asynchronous JavaScript and XML）以及Struts框架，可以实现一个动态显示文件上传进度的进度条，从而显著提升用户体验。 #### 二、关键技术介绍 1. **DWR (Direct Web...

    dwr3实现的无刷新文件上传

    总之，"dwr3实现的无刷新文件上传"是一个实用的教程，可以帮助开发者理解DWR3如何简化Ajax开发，特别是文件上传这一常见任务。通过学习和实践这个项目，开发者可以提升自己的技能，并将这些知识应用到更复杂的Web...

    dwr3.0 文件上传

    标题 "dwr3.0 文件上传" 涉及到的是Direct Web Remoting（DWR）框架的一个关键特性，即在Web应用中实现文件的上传功能。DWR是一款开源JavaScript库，它允许JavaScript代码直接调用Java服务器端的方法，从而在浏览器...

    fileupload+dwr2+webwork2实现带进度条上传文件

    "fileupload+dwr2+webwork2实现带进度条上传文件"这个主题涉及到三个关键技术和组件：FileUpload、Direct Web Remoting (DWR) 和 WebWork2，它们协同工作以提供一个带有进度条的高效、用户友好的文件上传体验。...

    struts1.2下实现文件上传进度条

    ### Struts 1.2 下实现文件上传进度条的关键知识点 #### 一、背景与目的 在基于Struts 1.2的Web应用中，实现文件上传时常常需要提供一个友好的用户界面来显示文件上传进度。这不仅提高了用户体验，还能够实时反馈...

    DWR + Servlet 实现文件上传功能

    本文将深入探讨如何利用DWR与Servlet实现在Web应用程序中添加文件上传功能，并且特别关注如何实现进度条展示。 DWR是一种JavaScript库，它允许在浏览器和服务器之间进行双向通信，使得动态更新页面变得更加容易。...

    DWR 实现ajax上传的小实例

    当文件上传过程中，DWR会发送一系列的更新事件，可以通过监听这些事件来更新进度条的状态。 五、安全与性能优化 1. 安全性：确保只允许特定类型的文件上传，以防止恶意文件。可以在服务器端验证文件类型和大小，...

    java写的带进度条的Ajax多文件上传

    通过DWR和Ajax，我们可以获取文件上传的进度信息，然后更新前端的进度条，让用户知道文件上传的状态。 6. **多文件上传**： 多文件上传是指用户可以选择并上传多个文件，而不是只能上传一个。这通常需要前端表单的...

Magicbox
Global site tag (gtag.js) - Google Analytics