掌控上传进度的AJAX Upload

掌控上传进度的AJAX Upload

作者：cleverpig


AJAX——最酷的“冲浪板”

原文永久链接及源代码下载地址：
http://www.matrix.org.cn/resource/article/2007-01-08/09db6d69-9ec6-11db-ab77-2bbe780ebfbf.html

动机：

        2006年底Google了一下AJAX Upload实现，结果没有发现很完整的Java实现。硕果仅存的就是TELIO公司的Pierre-Alexandre发表的《AJAX Upload progress monitor for Commons-FileUpload Example》文中提供的ajax-upload-1.0.war。

        虽然上文中完成Upload工作的是Apache的Common-FileUpload组件，但在其代码中所使用的FileUpload1.1版本并没有1.2版本所提供的上传处理Listener功能，这就对检测文件上传情况造成了困难。我想正是这个原因致使Pierre-Alexandre使用了DWR+MonitoredDiskFileItem、MonitoredDiskFileItemFactory类（分别继承DiskFileItem、DiskFileItemFactory） 的方式：前者负责在web客户端进行Remote Call；后者在进行文件数据读取时统计数据总量、读取数据量、处理文件总数，并保存于Session中，以供web客户端通过DWR远程调用 UploadMonitor类的getUploadInfo方法进行轮询（Poll）。

        从本人观点出发，Pierre-Alexandre实现的不足之处：
        1.没有用户取消上传功能；
        2.完全的DWR实现，没有使用Prototype，对于不会使用DWR的开发者来讲有一定的知识局限性，而且由于DWR的个性而造成不便将此实现集成到项目中。



Prototype+Servlet的实现：


Prototype+Servlet的Example


        所以出于研究Prototype之目的，本人经过仔细思考，尝试实现了一个Prototype+Servlet的简单Example。其工作流程很简单：
1.在Form提交上传文件Field的同时，使用AJAX周期性地从Servlet轮询上传状态信息；
2.然后，根据此信息更新进度条和相关文字，及时反映文件传输状态；
3.如果用户取消上传操作，则进行相应的现场清理工作：删除已经上传的文件，在Form提交页面中显示相关信息；
4.如果上传完毕，在Form提交页面中显示已经上传的文件内容（或链接），也可以与一些AJAX SlideShow应用结合在一起。

服务器端代码：

        Bean序列化/反序列化工作：XmlUnSerializer这个类虽然不能够通吃任何模样的Bean，但应付一般的Bean、具有Collection类型属性的Bean和Bean List来讲还是够用的。
        {XmlUnSerializer类的核心方法serializeBean和serializeBeanList}:

java 代码
/**
 * 将bean系列化为UTF-8编码的xml
 * @param beanObj
 * @return
 * @throws IOException
 */
public static String serializeBean(Object beanObj) throws IOException{
…
}
/**
 * 将bean列表序列化为UTF-8编码的xml
 * @param beanObj
 * @return
 * @throws IOException
 */
public static String serializeBeanList(Object beanListObj) throws IOException{
…
}

        文件上传状态Bean：使 用FileUploadStatus这个类记录文件上传状态，并将其作为服务器端与web客户端之间通信的媒介物：通过对这个类对象进行XML序列化作为 服务器回应发送给web客户端，web客户端使用JavaScript对其进行反序列化处理获得JavaScript版本的文件上传状态对象。
        {FileUploadStatus的属性}:

java 代码
//上传总量
private long uploadTotalSize=0;
//读取上传总量
private long readTotalSize=0;
//当前上传文件号
private int currentUploadFileNum=0;
//成功读取上传文件数
private int successUploadFileCount=0;
//状态
private String status="";
//处理起始时间
private long processStartTime=0l;
//处理终止时间
private long processEndTime=0l;
//处理执行时间
private long processRunningTime=0l;
//上传文件URL列表
private List uploadFileUrlList=new ArrayList();
//取消上传
private boolean cancel=false;
//上传base目录
private String baseDir="";

        文件上传状态监视工作：使用Common-FileUpload 1.2版本（20070103）。此版本与1.1版的区别在于提供了能够监视文件上传情况的ProcessListener接口，使开发者通过FileUploadBase类对象的setProcessListener方法植入自己的Listener，而且实现这个Listener很简单。
        {FileUploadListener主要方法update}：

java 代码
/**
 * 更新状态
 * @param pBytesRead 读取字节总数
 * @param pContentLength 数据总长度
 * @param pItems 当前正在被读取的field号
 */
public void update(long pBytesRead, long pContentLength, int pItems){
        FileUploadStatus fuploadStatus=BackGroundService.takeOutFileUploadStatusBean(this.session);
        logger.debug("当前正在处理第" + pItems+"个文件");
        fuploadStatus.setUploadTotalSize(pContentLength);
        //读取完成
    if (pContentLength == -1) {
       logger.debug("读取完成:读取了 " + pBytesRead + " bytes.");
       fuploadStatus.setStatus("完成对" + pItems+"个文件的读取:读取了 " + pBytesRead + " bytes.");
       fuploadStatus.setReadTotalSize(pBytesRead);
       fuploadStatus.setSuccessUploadFileCount(pItems);
       fuploadStatus.setProcessEndTime(System.currentTimeMillis());
       fuploadStatus.setProcessRunningTime(fuploadStatus.getProcessEndTime());
    //读取中
    } else {
       logger.debug("读取进行中:已经读取了 " + pBytesRead + " / " + pContentLength+ " bytes.");
       fuploadStatus.setStatus("当前正在处理第" + pItems+"个文件:已经读取了 " + pBytesRead + " / " + pContentLength+ " bytes.");
       fuploadStatus.setReadTotalSize(pBytesRead);
       fuploadStatus.setCurrentUploadFileNum(pItems);
       fuploadStatus.setProcessRunningTime(System.currentTimeMillis());
    }
    BackGroundService.storeFileUploadStatusBean(this.session,fuploadStatus);
}

        很清楚，我也把FileUploadStatus这个Bean存取于Session中。

        Servlet实现：BackGroundService 这个Servlet类负责接收Form Post数据、回应状态轮询请求、处理取消文件上传的请求。尽管可以把这些功能相互分离开来（比如构造一个FileUploadManager类），但出 于简单明了、便于阅读之目的，还是将它们放到Servlet中，只是由不同的方法进行分割。
        {BackGroundService中的processFileUpload方法用于处理文件上传请求}：

java 代码
/**
 * 处理文件上传
 * @param request
 * @param response
 * @throws IOException
 * @throws ServletException
 */
private void processFileUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        DiskFileItemFactory factory = new DiskFileItemFactory();
        //设置内存阀值，超过后写入临时文件
        factory.setSizeThreshold(10240000);
        //设置临时文件存储位置
        factory.setRepository(new File(request.getRealPath("/upload/temp")));
        ServletFileUpload upload = new ServletFileUpload(factory);
        //设置单个文件的最大上传size
        upload.setFileSizeMax(10240000);
        //设置整个request的最大size
        upload.setSizeMax(10240000);
        upload.setProgressListener(new FileUploadListener(request.getSession()));
        //保存初始化后的FileUploadStatus Bean
        storeFileUploadStatusBean(request.getSession(),initFileUploadStatusBean(request));

        String forwardURL="";
        try {
                List items = upload.parseRequest(request);
                //获得返回url
                for(int i=0;i
                        FileItem item=(FileItem)items.get(i);
                        if (item.isFormField()){
                                logger.debug("form Field["+item.getFieldName()+"]="+item.getString());
                                forwardURL=item.getString();
                                break;
                        }
                }
                //处理文件上传
                for(int i=0;i
                        FileItem item=(FileItem)items.get(i);

                        //取消上传
                        if (takeOutFileUploadStatusBean(request.getSession()).getCancel()){
                                deleteUploadedFile(request);
                                break;
                        }
                        //保存文件
                        else if (!item.isFormField() && item.getName().length()>0){
                                String fileName=takeOutFileName(item.getName());
                                logger.debug("处理文件["+fileName+"]:保存路径为"
                                                +request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
                                File uploadedFile = new File(request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
                                item.write(uploadedFile);
                                //更新上传文件列表
                                FileUploadStatus fUploadStatus=takeOutFileUploadStatusBean(request.getSession());
                                fUploadStatus.getUploadFileUrlList().add(fileName);
                                storeFileUploadStatusBean(request.getSession(),fUploadStatus);
                                Thread.sleep(500);
                        }
                }

        } catch (FileUploadException e) {
                logger.error("上传文件时发生错误:"+e.getMessage());
                e.printStackTrace();
                uploadExceptionHandle(request,"上传文件时发生错误:"+e.getMessage());
        } catch (Exception e) {
                // TODO Auto-generated catch block
                logger.error("保存上传文件时发生错误:"+e.getMessage());
                e.printStackTrace();
                uploadExceptionHandle(request,"保存上传文件时发生错误:"+e.getMessage());
        }
        if (forwardURL.length()==0){
                forwardURL=DEFAULT_UPLOAD_FAILURE_URL;
        }
        request.getRequestDispatcher(forwardURL).forward(request,response);
}

        {BackGroundService中的responseFileUploadStatusPoll方法用于处理对文件上传状态的轮询请求}：

java 代码
/**
 * 回应上传状态查询
 * @param request
 * @param response
 * @throws IOException
 */
private void responseFileUploadStatusPoll(HttpServletRequest request,HttpServletResponse response) throws IOException{
        response.setContentType("text/xml");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        logger.debug("发送上传状态回应");
        response.getWriter().write(XmlUnSerializer.serializeBean(
                        request.getSession().getAttribute(UPLOAD_STATUS)));
}

        {BackGroundService中的processCancelFileUpload方法用于处理取消文件上传的请求}：

java 代码
/**
 * 处理取消文件上传
 * @param request
 * @param response
 * @throws IOException
 */
private void processCancelFileUpload(HttpServletRequest request,HttpServletResponse response) throws IOException{
        FileUploadStatus fUploadStatus=(FileUploadStatus)request.getSession().getAttribute(UPLOAD_STATUS);
        fUploadStatus.setCancel(true);
        request.getSession().setAttribute(UPLOAD_STATUS, fUploadStatus);
        responseFileUploadStatusPoll(request,response);
}

Web客户端代码：


Prototype给开发者更多的自由选择


web客户端使用了基于Prototype的AjaxWrapper类和XMLDomForAjax类，前者实现了对Ajax.Request功能的封装，而后者实现了对来自服务器的XML Response的反序列化（反序列化为JavaScript对象）。

        为了避免在AjaxWrapper的回调方法中发生this被重写的问题，我使用了ClassUtils类给任何类的每个方法注册一个对类对象自身引用，详见《解开JavaScript生命的达芬奇密码》和《Prototype.AjaxRequest的调用堆栈重写问题》：
        {ClassUtils类代码}：

js 代码
//类工具
var ClassUtils=Class.create();
ClassUtils.prototype={
        _ClassUtilsName:'ClassUtils',
        initialize:function(){
        },
        /**
         * 给类的每个方法注册一个对类对象的自我引用
         * @param reference 对类对象的引用
         */
        registerFuncSelfLink:function(reference){
                for (var n in reference) {
                var item = reference[n];
                if (item instanceof Function)
                                item.$ = reference;
            }
        }
}

        {将XML反序列化为JavaScript对象的XMLDomForAjax类代码}：

js 代码
var XMLDomForAjax=Class.create();
XMLDomForAjax.prototype={
        isDebug:false,
        //dom节点类型常量
        ELEMENT_NODE:1,
        ATTRIBUTE_NODE:2,
    TEXT_NODE:3,
    CDATA_SECTION_NODE:4,
    ENTITY_REFERENCE_NODE:5,
    ENTITY_NODE:6,
    PROCESSING_INSTRUCTION_NODE:7,
    COMMENT_NODE:8,
    DOCUMENT_NODE:9,
    DOCUMENT_TYPE_NODE:10,
    DOCUMENT_FRAGMENT_NODE:11,
    NOTATION_NODE:12,

        initialize:function(isDebug){
                new ClassUtils().registerFuncSelfLink(this);
                this.isDebug=isDebug;
        },
        /**
         * 建立跨平台的dom解析器
         * @param xml xml字符串
         * @return dom解析器
         */
        createDomParser:function(xml){
                // code for IE
                if (window.ActiveXObject){
                  var doc=new ActiveXObject("Microsoft.XMLDOM");
                  doc.async="false";
                  doc.loadXML(xml);
                }
                // code for Mozilla, Firefox, Opera, etc.
                else{
                  var parser=new DOMParser();
                  var doc=parser.parseFromString(xml,"text/xml");
                }
                return doc;
        },
        /**
         * 反向序列化xml到javascript Bean
         * @param xml xml字符串
         * @return javascript Bean
         */
        deserializedBeanFromXML:function (xml){
                var funcHolder=arguments.callee.$;
                var doc=funcHolder.createDomParser(xml);
                // documentElement总表示文档的root
                var objDomTree=doc.documentElement;
                var obj=new Object();
            for (var i=0; i
                    //获得节点
                    var node=objDomTree.childNodes[i];
                    //取出其中的field元素进行处理
                if ((node.nodeType==funcHolder.ELEMENT_NODE) && (node.tagName == 'field')) {
                        var nodeText=funcHolder.getNodeText(node);
                        if (funcHolder.isDebug){
                            alert(node.getAttribute('name')+' type:'+node.getAttribute('type')+' text:'+nodeText);
                        }
                    var objFieldValue=null;
                    //如果为列表
                    if (node.getAttribute('type')=='java.util.List'){
                            if (objFieldValue && typeof(objFieldValue)=='Array'){
                                    if (nodeText.length>0){
                                                        objFieldValue[objFieldValue.length]=nodeText;
                                                }
                                        }
                                        else{
                                                objFieldValue=new Array();
                                        }
                                }
                                else if (node.getAttribute('type')=='long'
                                        || node.getAttribute('type')=='java.lang.Long'
                                        || node.getAttribute('type')=='int'
                                        || node.getAttribute('type')=='java.lang.Integer'){

                                        objFieldValue=parseInt(nodeText);
                                }
                                else if (node.getAttribute('type')=='double'
                                        || node.getAttribute('type')=='float'
                                        || node.getAttribute('type')=='java.lang.Double'
                                        || node.getAttribute('type')=='java.lang.Float'){

                                        objFieldValue=parseFloat(nodeText);
                                }
                                else if (node.getAttribute('type')=='java.lang.String'){
                                        objFieldValue=nodeText;
                                }
                                else{
                                        objFieldValue=nodeText;
                                }
                                //赋值给对象
                                obj[node.getAttribute('name')]=objFieldValue;
                                if (funcHolder.isDebug){
                                        alert(eval('obj.'+node.getAttribute('name')));  </sp>

评论

11 楼 hzq928 2007-01-29  

怎么解压缩后的内容是.war文件,我想看源代码怎么办

10 楼 hzq928 2007-01-28  

我怎么都不能下载啊,图片也看不见,不知道是什么原因

9 楼 xugq035 2007-01-27  

报“通讯出错”的朋友加入commons-collections-3.2.jar就可以了

另外发现上传2个或3个文件成功后，result页面只列出最后一个文件，这是不是bug?

8 楼 huxf5189 2007-01-25  

在包里面有一个bjvip_quickaction.jar   不知道这个包是什么啊?能提供代码吗?

7 楼 jianfeng008cn 2007-01-24  

刚4了一下，的确是有错啊

[size=7][size=9]12:45:35,765  INFO UploadSessionManager:104 - 管理器启动中...周期=60000ms
12:45:35,796 DEBUG FileUploadCommandService:214 - session id=AD86BA7BDA54C062629F911EF35C5E71
12:45:35,812 DEBUG FileUploadCommandService:217 - 收到Join请求
12:45:35,812 DEBUG FileUploadCommandService:95 - 发送Join回应
12:45:35,828 DEBUG FileUploadStatusBeanManager:61 - 初始化文件上传状态Bean
12:45:35,828  INFO UploadSessionManager:74 - session[dikitiruvacapehehawo]被添加/更新
12:45:35,843 DEBUG Utils:93 - 从httpRequest中取出forwardURL：./result.html
12:45:35,843 DEBUG FileUploadCommandService:103 - 将会话Id[dikitiruvacapehehawo]保存在session[AD86BA7BDA54C062629F911EF35C5E71]中
12:45:45,500 ERROR [FileUploadCommandService]:253 - Servlet.service() for servlet FileUploadCommandService threw exception
java.lang.NoClassDefFoundError: org/apache/commons/collections/FastHashMap
	at org.apache.commons.beanutils.ConvertUtilsBean.<init>(ConvertUtilsBean.java:125)
	at com.bjinfotech.util.objecttk.BeanUtils.<init>(BeanUtils.java:24)
	at com.bjinfotech.practice.ajax.XmlUnSerializer.serializeBean(XmlUnSerializer.java:141)
	at com.bjinfotech.practice.ajax.FileUploadCommandService.sendSerializedBean(FileUploadCommandService.java:84)
	at com.bjinfotech.practice.ajax.FileUploadCommandService.responseJoinRequest(FileUploadCommandService.java:104)
	at com.bjinfotech.practice.ajax.FileUploadCommandService.doPost(FileUploadCommandService.java:218)
	at com.bjinfotech.practice.ajax.FileUploadCommandService.doGet(FileUploadCommandService.java:51)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:689)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:252)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:173)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:213)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:178)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:126)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:105)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:107)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:148)
	at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:869)
	at org.apache.coyote.http11.Http11BaseProtocol$Http11ConnectionHandler.processConnection(Http11BaseProtocol.java:664)
	at org.apache.tomcat.util.net.PoolTcpEndpoint.processSocket(PoolTcpEndpoint.java:527)
	at org.apache.tomcat.util.net.LeaderFollowerWorkerThread.runIt(LeaderFollowerWorkerThread.java:80)
	at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:684)
	at java.lang.Thread.run(Unknown Source)[/size][/size]

6 楼 cleverpig 2007-01-23  

引用

布u2版本 有错阿， 怎么提示“网络通讯失败” “获得回应失败”

通讯失败？请把log内容贴上吧。我这里测试正常啊。

5 楼 cleverpig 2007-01-23  

引用

我也写了一个类似的控件,不过有个问题,后台只能取到整个表单的大小,没法取到文件的大小,这样在做文件上传进度的时候有点问题,另外http的文件上传好像太慢了

我在后台使用servlet，判断request header中的content-length，把它作为判断上传文件大小的依据。如果要进一步分析每个文件的大小，本人觉得没有必要，而且这种分析只能随着对request流的解析同时进行。

4 楼 discolt 2007-01-22  

布u2版本 有错阿， 怎么提示“网络通讯失败” “获得回应失败”

3 楼 rtm 2007-01-21  

我也写了一个类似的控件,不过有个问题,后台只能取到整个表单的大小,没法取到文件的大小,这样在做文件上传进度的时候有点问题,另外http的文件上传好像太慢了

2 楼 cleverpig 2007-01-20  

针对反馈的问题，我发布u2版本，进行了部分改进和提升：

U2's new Feature:

1.使用独立的UploadSessionManager管理uploadSession，使后者在AJAX 和form之间共享。分离原处一处的“处理文件上传”、“状态查询”任务到UploadProcessService和 FileUploadCommandService这两个servlet中，实现上传和查询的操作分离，提高反应速度。

2.使用AJAX join命令，首先发送AJAX请求，然后进行form submit，这样可以达到session的一致；

3.增加了MyServletFileUpload类，继承与ServletFileUpload，并在其parserRequest方法中增加了cancel upload处理；

4.增加在servlet进行处理前的上传文件超限的检测能力；

5.upload和result页面完全使用AJAX+DHTML，摆脱了对JSP的依赖。

1 楼 cleverpig 2007-01-12  

根据大家的反馈，已经完成了AJAX FileUpload的u1版，进行了以下fix：

1。支持中文文件下载
2。增加了单个文件的删除功能
3。增加了AJAX动画显示

大家可以从本文的源代码处或者这里下载