掌控上传进度的AJAX Upload

        {AjaxWrapper类的主要方法putRequest和callBackHandler}：

         /**
         * 以get的方式向server发送request
         * @param url
         * @param params
         * @param callBackFunction 发送成功后回调的函数或者函数名
         */
        putRequest:function(url,params,callBackFunction){
                var funcHolder=arguments.callee.$;
            var xmlHttp = new Ajax.Request(url,
                        {
                                method: 'get', 
                            parameters: params, 
                                requestHeaders:['my-header-encoding','utf-8'],
                            onFailure: function(){
                                        alert('对不起，网络通讯失败，请重新刷新！');
                                },
                                onSuccess: function(transport){
                                },
                                onComplete: function(transport){
                         funcHolder.callBackHandler.apply(funcHolder,[transport,callBackFunction]);
                                }
                        });
        },
        /**
         * 远程调用的回调处理
         * @param transport xmlhttp的transport
         * @param callBackFunction 回调时call的方法，可以是函数也可以是函数名
         */
        callBackHandler:function(transport,callBackFunction){
                var funcHolder=arguments.callee.$;
                if(transport.status!=200){
                        alert("获得回应失败,请求状态:"+transport.status);
                }
                else{
                        funcHolder.xml_source=transport.responseText;
                        if (funcHolder.debug_flag)
                                alert('call callback function');
                        if (typeof(callBackFunction)=='function'){
                                if (funcHolder.debug_flag){
                                        alert('invoke callbackFunc');
                                }
                                callBackFunction(transport.responseText);
                        }
                        else{
                                if (funcHolder.debug_flag){
                                        alert('evalFunc callbackFunc');
                                }
                                new execute().evalFunc(callBackFunction,transport.responseText);
                        }
                        if (funcHolder.debug_flag)
                                alert('end callback function');
                }
        }

        {页面中主要的JavaScript方法：refreshUploadStatus和startProcess/cancelProcess}：

//刷新上传状态
function refreshUploadStatus(){
        var ajaxW = new AjaxWrapper(false);
        ajaxW.putRequest(
                './uploadStatus.action',
                'uploadStatus=',
                function(responseText){
                        var deserialor=new XMLDomForAjax(false);
                        var uploadInfo=deserialor.deserializedBeanFromXML(responseText);
                        var progressPercent = Math.ceil(
                                (uploadInfo.readTotalSize) / uploadInfo.uploadTotalSize * 100);

                $('progressBarText').innerHTML = ' 上传处理进度: '+progressPercent+'% ['+
                        (uploadInfo.readTotalSize)+'/'+uploadInfo.uploadTotalSize + ' bytes]'+
                        ' 正在处理第'+uploadInfo.currentUploadFileNum+'个文件'+
                        ' 耗时: '+(uploadInfo.processRunningTime-uploadInfo.processStartTime)+' ms';
                $('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.status;
                $('totalProgressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
                }
        );
}
//上传处理
function startProgress(){
        Element.show('progressBar');
    $('progressBarText').innerHTML = ' 上传处理进度: 0%';
    $('progressStatusText').innerHTML=' 反馈状态:';
    $('uploadButton').disabled = true;
    var periodicalExe=new PeriodicalExecuter(refreshUploadStatus,2);
    return true;
}
//取消上传处理
function cancelProgress(){
        $('cancelUploadButton').disabled = true;
        var ajaxW = new AjaxWrapper(false);
        ajaxW.putRequest(
                './uploadStatus.action',
                'cancelUpload=true',
                //因为form的提交，这可能不会执行
                function(responseText){
                        var deserialor=new XMLDomForAjax(false);
                        var uploadInfo=deserialor.deserializedBeanFromXML(responseText);
                        $('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.status;
                        if (msgInfo.cancel=='true'){
                                alert('删除成功!');
                                window.location.reload();
                        };
                }
        );
}

运行界面：

点击查看大图
起始页面


点击查看大图
上传进行中…


点击查看大图
上传完成后的文件列表


点击查看大图
用户取消上传后显示的页面


点击查看大图
上传过程中出错（上传文件过大）页面

源代码下载：



相关链接：
        AJAX Upload progress monitor for Commons-FileUpload Example
        Apache Common FileUpload组件
        Prototype官方网站
        IBM的AJAX SlideShow应用
        解开JavaScript生命的达芬奇密码
        Prototype.AjaxRequest的调用堆栈重写问题

感谢阅读此文

        请支持cleverpig发起的
更多内容请看PCdog.com--Ajax技术专题