在web上传中，实现进度条是间很COOL的事情，但是很多时候，为了实现进度条我们需要做的工作量会很大，现在采用FLASH可以很方便的使用，但是您想过通过JQUERY来实现吗？

 

Js代码如下

jQuery.extend({   

  

    createUploadIframe: function(id, uri){   

  

            var frameId = 'CrazyCoder_CN' + id;   

               

            if(window.ActiveXObject) {   

                var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');   

  

                if(typeof uri== 'boolean'){   

                    io.src = 'javascript:false';   

                }   

                else if(typeof uri== 'string'){   

                    io.src = uri;   

                }   

            }   

            else {   

                var io = document.createElement('iframe');   

                io.id = frameId;   

                io.name = frameId;   

            }   

  

            io.style.position = 'absolute';   

            io.style.top = '-1000px';   

            io.style.left = '-1000px';   

  

            document.body.appendChild(io);   

  

            return io   

  

    },   

  

    ajaxUpload: function(s) {   

        // 初始化

        s = jQuery.extend({}, jQuery.ajaxSettings, s);   

           

        var id = new Date().getTime()   

        io = jQuery.createUploadIframe(id, s.secureuri)   

  

        // Watch for a new set of requests   

        if ( s.global && ! jQuery.active++ )   

            jQuery.event.trigger( "ajaxStart" );   

  

        var requestDone = false;   

  

        // Create the request object   

        var xml = {}      

        if ( s.global )   

            jQuery.event.trigger("ajaxSend", [xml, s]);   

  

        // Wait for a response to come back   

        var uploadCallback = function(isTimeout){   

            try {   

                xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;   

                xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;   

            }   

            catch(e){}   

            if ( xml || isTimeout == "timeout") {   

                requestDone = true;   

                var status;   

                try {   

                    status = isTimeout != "timeout" ? "success" : "error";   

                    // Make sure that the request was successful or notmodified   

                    if ( status != "error" ) {   

                        // process the data (runs the xml through httpData regardless of callback)   

                        var data = jQuery.uploadHttpData( xml, s.dataType );   

       

                        // If a local callback was specified, fire it and pass it the data   

                        if ( s.success )   

                            s.success( data, status );   

       

                        // Fire the global callback   

                        if( s.global )   

                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );   

                    } else  

                        jQuery.handleError(s, xml, status);   

                } catch(e) {   

                    status = "error";   

                    jQuery.handleError(s, xml, status, e);   

                }   

  

                // The request was completed   

                if( s.global )   

                    jQuery.event.trigger( "ajaxComplete", [xml, s] );   

  

                // Handle the global AJAX counter   

                if ( s.global && ! --jQuery.active )   

                    jQuery.event.trigger( "ajaxStop" );   

  

                // Process result   

                if ( s.complete )   

                    s.complete(xml, status);   

  

                // jQuery(io).unbind()   

  

                // setTimeout(function(){ document.body.removeChild(io); }, 100)   

  

                xml = null  

  

            }   

        }   

        // Timeout checker   

        if ( s.timeout > 0 ) {   

            setTimeout(function(){   

                // Check to see if the request is still happening   

                if( !requestDone ) uploadCallback( "timeout" );   

            }, s.timeout);   

        }   

        try {   

            var frameId = 'jQuery' + id;   

            var io = document.getElementById(frameId);   

            // Initialize the HTML form properties in case they are   

            // not defined in the HTML form.   

            s.uploadform.action = s.url;   

            s.uploadform.method = 'POST';   

            s.uploadform.target = frameId;   

  

            // Add extra data that may have been already passed.   

            if (s.data) {   

                var oEls = s.data.split('&');   

                for (var i=0; i < oEls.length; i++ ){   

                    var thisEl = oEls[i].split('=');   

                    var thisFormEl = document.createElement('input');   

                    thisFormEl.type = 'hidden';   

                    thisFormEl.name = thisEl[0];   

                    thisFormEl.value = thisEl[1];   

                    s.uploadform.appendChild(thisFormEl);   

                }   

                   

            }   

  

  

            if(s.uploadform.encoding){   

                // IE does not respect property enctype for HTML forms.   

                // Instead use property encoding.   

                s.uploadform.encoding = 'multipart/form-data';   

            }   

            else{   

                s.uploadform.enctype = 'multipart/form-data';   

            }   

  

            s.uploadform.submit();   

  

        } catch(e) {   

            jQuery.handleError(s, xml, null, e);   

        }   

  

        if(window.attachEvent){   

            io.attachEvent('onload', uploadCallback);   

        }   

        else{   

            io.addEventListener('load', uploadCallback, false);   

        }          

           

        return {abort: function () {}};   

  

    },   

  

    uploadHttpData: function( r, type ) {   

        var data = !type;   

        data = type == "xml" || data ? r.responseXML : r.responseText;   

        // If the type is "script", eval it in global context   

        if ( type == "script" )   

            jQuery.globalEval( data );   

  

        // Get the JavaScript object, if JSON is used.   

        if ( type == "json" )   

            eval( "data = " + data );   

  

        // evaluate scripts within html   

        if ( type == "html" )   

            jQuery("<div>").html(data).evalScripts();   

  

        return data;   

    }   

})   

  

Ext.lib.Ajax.formRequest = function(form, uri, cb, data, isUpload, sslUri){   

    var createComplete = function(cb){   

         return function(xhr, status){   

            if((status == 'error' || status == 'timeout') && cb.failure){   

                cb.failure.call(cb.scope||window, {   

                    responseText: xhr.responseText,   

                    responseXML : xhr.responseXML,   

                    argument: cb.argument   

                });   

            }else if(cb.success){   

                cb.success.call(cb.scope||window, {   

                    responseText: xhr.responseText,   

                    responseXML : xhr.responseXML,   

                    argument: cb.argument   

                });   

            }   

         };   

    };   

  

            if (isUpload) {   

                jQuery.ajaxUpload({   

                    uploadform: form,   

                    data: data,   

                    url: uri,   

                    secureuri: sslUri,   

                    complete: createComplete(cb)   

                });   

            } else {   

                jQuery.ajax({   

                    type: Ext.getDom(form).method ||'POST',   

                    url: uri,   

                    data: jQuery(form).formSerialize()+(data?'&'+data:''),   

                    timeout: cb.timeout,   

                    complete: createComplete(cb)   

                });   

            }   

        };  

Progress progress = HttpUploadModule.GetProgress(upid, this.Application); 

 string scriptText = ""; 

  if (progress != null) 

   { 

       if (progress.State == UploadState.ReceivingData) 

        { string length = (progress.ContentLength / 1024).ToString(); 

           string read = (progress.BytesRead / 1024).ToString(); 

          scriptText = String.Format("{0}:{1}", length, read); 

                } 

                else if (progress.State == UploadState.Complete) 

                { 

                    scriptText = "完成"; 

                } 

                else 

                { 

                   scriptText = "出错"; 

                } 

            } 

            return scriptText; 

        }