专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Ajax教程 » Jquery,通过扩展Jquery插件而Ajax实现文件上传进度条 »正文

Jquery,通过扩展Jquery插件而Ajax实现文件上传进度条

来源: 发布时间:星期三, 2008年9月17日 浏览:1394次 评论:0
在web上传中,实现进度条是间很COOL的事情,但是很多时候,为了实现进度条我们需要做的工作量会很大,现在采用FLASH可以很方便的使用,但是您想过通过JQUERY来实现吗?
 
Js代码如下
  1. jQuery.extend({   
  2.   
  3.     createUploadIframe: function(id, uri){   
  4.   
  5.             var frameId = 'CrazyCoder_CN' + id;   
  6.                
  7.             if(window.ActiveXObject) {   
  8.                 var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');   
  9.   
  10.                 if(typeof uri== 'boolean'){   
  11.                     io.src = 'javascript:false';   
  12.                 }   
  13.                 else if(typeof uri== 'string'){   
  14.                     io.src = uri;   
  15.                 }   
  16.             }   
  17.             else {   
  18.                 var io = document.createElement('iframe');   
  19.                 io.id = frameId;   
  20.                 io.name = frameId;   
  21.             }   
  22.   
  23.             io.style.position = 'absolute';   
  24.             io.style.top = '-1000px';   
  25.             io.style.left = '-1000px';   
  26.   
  27.             document.body.appendChild(io);   
  28.   
  29.             return io   
  30.   
  31.     },   
  32.   
  33.     ajaxUpload: function(s) {   
  34.         // 初始化
  35.         s = jQuery.extend({}, jQuery.ajaxSettings, s);   
  36.            
  37.         var id = new Date().getTime()   
  38.         io = jQuery.createUploadIframe(id, s.secureuri)   
  39.   
  40.         // Watch for a new set of requests   
  41.         if ( s.global && ! jQuery.active++ )   
  42.             jQuery.event.trigger( "ajaxStart" );   
  43.   
  44.         var requestDone = false;   
  45.   
  46.         // Create the request object   
  47.         var xml = {}      
  48.         if ( s.global )   
  49.             jQuery.event.trigger("ajaxSend", [xml, s]);   
  50.   
  51.         // Wait for a response to come back   
  52.         var uploadCallback = function(isTimeout){   
  53.             try {   
  54.                 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;   
  55.                 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;   
  56.             }   
  57.             catch(e){}   
  58.             if ( xml || isTimeout == "timeout") {   
  59.                 requestDone = true;   
  60.                 var status;   
  61.                 try {   
  62.                     status = isTimeout != "timeout" ? "success" : "error";   
  63.                     // Make sure that the request was successful or notmodified   
  64.                     if ( status != "error" ) {   
  65.                         // process the data (runs the xml through httpData regardless of callback)   
  66.                         var data = jQuery.uploadHttpData( xml, s.dataType );   
  67.        
  68.                         // If a local callback was specified, fire it and pass it the data   
  69.                         if ( s.success )   
  70.                             s.success( data, status );   
  71.        
  72.                         // Fire the global callback   
  73.                         if( s.global )   
  74.                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );   
  75.                     } else  
  76.                         jQuery.handleError(s, xml, status);   
  77.                 } catch(e) {   
  78.                     status = "error";   
  79.                     jQuery.handleError(s, xml, status, e);   
  80.                 }   
  81.   
  82.                 // The request was completed   
  83.                 if( s.global )   
  84.                     jQuery.event.trigger( "ajaxComplete", [xml, s] );   
  85.   
  86.                 // Handle the global AJAX counter   
  87.                 if ( s.global && ! --jQuery.active )   
  88.                     jQuery.event.trigger( "ajaxStop" );   
  89.   
  90.                 // Process result   
  91.                 if ( s.complete )   
  92.                     s.complete(xml, status);   
  93.   
  94.                 // jQuery(io).unbind()   
  95.   
  96.                 // setTimeout(function(){ document.body.removeChild(io); }, 100)   
  97.   
  98.                 xml = null  
  99.   
  100.             }   
  101.         }   
  102.         // Timeout checker   
  103.         if ( s.timeout > 0 ) {   
  104.             setTimeout(function(){   
  105.                 // Check to see if the request is still happening   
  106.                 if( !requestDone ) uploadCallback( "timeout" );   
  107.             }, s.timeout);   
  108.         }   
  109.         try {   
  110.             var frameId = 'jQuery' + id;   
  111.             var io = document.getElementById(frameId);   
  112.             // Initialize the HTML form properties in case they are   
  113.             // not defined in the HTML form.   
  114.             s.uploadform.action = s.url;   
  115.             s.uploadform.method = 'POST';   
  116.             s.uploadform.target = frameId;   
  117.   
  118.             // Add extra data that may have been already passed.   
  119.             if (s.data) {   
  120.                 var oEls = s.data.split('&');   
  121.                 for (var i=0; i < oEls.length; i++ ){   
  122.                     var thisEl = oEls[i].split('=');   
  123.                     var thisFormEl = document.createElement('input');   
  124.                     thisFormEl.type = 'hidden';   
  125.                     thisFormEl.name = thisEl[0];   
  126.                     thisFormEl.value = thisEl[1];   
  127.                     s.uploadform.appendChild(thisFormEl);   
  128.                 }   
  129.                    
  130.             }   
  131.   
  132.   
  133.             if(s.uploadform.encoding){   
  134.                 // IE does not respect property enctype for HTML forms.   
  135.                 // Instead use property encoding.   
  136.                 s.uploadform.encoding = 'multipart/form-data';   
  137.             }   
  138.             else{   
  139.                 s.uploadform.enctype = 'multipart/form-data';   
  140.             }   
  141.   
  142.             s.uploadform.submit();   
  143.   
  144.         } catch(e) {   
  145.             jQuery.handleError(s, xml, null, e);   
  146.         }   
  147.   
  148.         if(window.attachEvent){   
  149.             io.attachEvent('onload', uploadCallback);   
  150.         }   
  151.         else{   
  152.             io.addEventListener('load', uploadCallback, false);   
  153.         }          
  154.            
  155.         return {abort: function () {}};   
  156.   
  157.     },   
  158.   
  159.     uploadHttpData: function( r, type ) {   
  160.         var data = !type;   
  161.         data = type == "xml" || data ? r.responseXML : r.responseText;   
  162.         // If the type is "script", eval it in global context   
  163.         if ( type == "script" )   
  164.             jQuery.globalEval( data );   
  165.   
  166.         // Get the JavaScript object, if JSON is used.   
  167.         if ( type == "json" )   
  168.             eval( "data = " + data );   
  169.   
  170.         // evaluate scripts within html   
  171.         if ( type == "html" )   
  172.             jQuery("<div>").html(data).evalScripts();   
  173.   
  174.         return data;   
  175.     }   
  176. })   
  177.   
  178. Ext.lib.Ajax.formRequest = function(form, uri, cb, data, isUpload, sslUri){   
  179.     var createComplete = function(cb){   
  180.          return function(xhr, status){   
  181.             if((status == 'error' || status == 'timeout') && cb.failure){   
  182.                 cb.failure.call(cb.scope||window, {   
  183.                     responseText: xhr.responseText,   
  184.                     responseXML : xhr.responseXML,   
  185.                     argument: cb.argument   
  186.                 });   
  187.             }else if(cb.success){   
  188.                 cb.success.call(cb.scope||window, {   
  189.                     responseText: xhr.responseText,   
  190.                     responseXML : xhr.responseXML,   
  191.                     argument: cb.argument   
  192.                 });   
  193.             }   
  194.          };   
  195.     };   
  196.   
  197.             if (isUpload) {   
  198.                 jQuery.ajaxUpload({   
  199.                     uploadform: form,   
  200.                     data: data,   
  201.                     url: uri,   
  202.                     secureuri: sslUri,   
  203.                     complete: createComplete(cb)   
  204.                 });   
  205.             } else {   
  206.                 jQuery.ajax({   
  207.                     type: Ext.getDom(form).method ||'POST',   
  208.                     url: uri,   
  209.                     data: jQuery(form).formSerialize()+(data?'&'+data:''),   
  210.                     timeout: cb.timeout,   
  211.                     complete: createComplete(cb)   
  212.                 });   
  213.             }   
  214.         };  

 

1

相关文章

读者评论

  • 1sadf(60.209.248.*) 发布于:星期二, 2008年9月23日
    adfasdf

发表评论

  • 昵称:
  • 内容: