zoukankan      html  css  js  c++  java
  • 如何让ajaxfileupload.js支持IE9,IE10,并可以传递多个参数?

    1、如何让ajaxfileupload.js支持IE9、IE10?

    打开ajaxfileupload 文件,找到下面的代码。

    [javascript] view plaincopy
     
    1. if(window.ActiveXObject) {  
    2.     var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
    3.      if(typeof uri== 'boolean'){  
    4.          io.src = 'javascript:false';  
    5.      }  
    6.      else if(typeof uri== 'string'){  
    7.          io.src = uri;  
    8.      }  
    9.  }  

    修改成如下:

    [javascript] view plaincopy
     
    1. if(window.ActiveXObject) {  
    2.    if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){  
    3.         var io = document.createElement('iframe');  
    4.         io.id = frameId;  
    5.         io.name = frameId;  
    6.     }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){  
    7.         var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
    8.         if(typeof uri== 'boolean'){  
    9.             io.src = 'javascript:false';  
    10.         }  
    11.         else if(typeof uri== 'string'){  
    12.             io.src = uri;  
    13.         }  
    14.     }  
    15. }  

    2、如何让ajaxfileupload.js可以在文件上传的同时传递多个台数。

    找到以下代码:

    [javascript] view plaincopy
     
    1. ajaxFileUpload: function(s) {  
    2.         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout          
    3.         s = jQuery.extend({}, jQuery.ajaxSettings, s);  
    4.         var id = new Date().getTime()          
    5.     var form = jQuery.createUploadForm(id, s.fileElementId);  

    增加自己要传递的参数:

    [javascript] view plaincopy
     
    1. ajaxFileUpload: function(s) {  
    2.         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout          
    3.         s = jQuery.extend({}, jQuery.ajaxSettings, s);  
    4.         var id = new Date().getTime()          
    5.     var form = jQuery.createUploadForm(id, s.fileElementId, s.tag_name, s.tag_link, s.tag_sort, s.tag_status, s.tag_id);  

    这里我们增加了五个传递参数。 s.tag_name, s.tag_link, s.tag_sort, s.tag_status, s.tag_id

    接着找到:

    [javascript] view plaincopy
     
    1. createUploadForm: function(id, fileElementId, tag_name, tag_link, tag_sort, tag_status, tag_id)//增加tag_name, tag_link, tag_sort, tag_status, tag_id  
    2.     {  
    3.         //create form     
    4.         var formId = 'jUploadForm' + id;  
    5.         var fileId = 'jUploadFile' + id;  
    6.         //--增加以下内容  
    7.         var tagNameId = 'tag_name' + id;  
    8.         var tagLinkId = 'tag_link' + id;  
    9.         var tagSortId = 'tag_sort' + id;  
    10.         var tagStatusId = 'tag_status' + id;  
    11.         var tagIdId = 'tag_id' + id;  
    12.         //--end  
    13.         var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');   
    14.         var oldElement = $('#' + fileElementId);  
    15.         var newElement = $(oldElement).clone();  
    16.         //--增加以下内容  
    17.         var tagNameElement = '<input type="text" name="tag_name" value="'+tag_name+'">';    
    18.         var tagLinkElement = '<input type="text" name="tag_link" value="'+tag_link+'">';  
    19.         var tagSortElement = '<input type="text" name="tag_sort" value="'+tag_sort+'">';  
    20.         var tagStatusElement = '<input type="text" name="tag_status" value="'+tag_status+'">';  
    21.         var tagIdElement = '<input type="text" name="tag_id" value="'+tag_id+'">';  
    22.         //--end  
    23.         $(oldElement).attr('id', fileId);  
    24.         $(oldElement).before(newElement);  
    25.         $(oldElement).appendTo(form);  
    26.         //--增加以下的内容  
    27.         $(tagNameElement).appendTo(form);  
    28.         $(tagLinkElement).appendTo(form);  
    29.         $(tagSortElement).appendTo(form);  
    30.         $(tagStatusElement).appendTo(form);  
    31.         $(tagIdElement).appendTo(form);  
    32.         //--end  
    33.         //set attributes  
    34.         $(form).css('position''absolute');  
    35.         $(form).css('top''-1200px');  
    36.         $(form).css('left''-1200px');  
    37.         $(form).appendTo('body');         
    38.         return form;  
    39.     },  

    注意注释中的内容为增加了内容。

    修改完后,如何使用?

    [javascript] view plaincopy
     
    1. $.ajaxFileUpload({  
    2.        url:web_url,  
    3.        secureuri:false,  
    4.        //以下为增加的传递参数  
    5.        tag_name:tag_name,  
    6. tag_link:tag_link,  
    7. tag_sort:tag_sort,  
    8. tag_status:tag_status,  
    9. tag_id:tag_id,  
    10.        //--end  
    11.        fileElementId:result[0],  
    12.        dataType: 'json',  
    13.        success: function (data,status){}  
    14.        //以下省略  


    OK,done.

    附ajaxfileupload完整版:

    [javascript] view plaincopy
     
      1. jQuery.extend({  
      2.       
      3.   
      4.     createUploadIframe: function(id, uri)  
      5.     {  
      6.             //create frame  
      7.             var frameId = 'jUploadFrame' + id;  
      8.               
      9.             if(window.ActiveXObject) {  
      10.                 // var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
      11.                 // if(typeof uri== 'boolean'){  
      12.                     // io.src = 'javascript:false';  
      13.                 // }  
      14.                 // else if(typeof uri== 'string'){  
      15.                     // io.src = uri;  
      16.                 // }  
      17.                   
      18.                 //fix ie9 and ie 10-------------  
      19.                 if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){  
      20.                     var io = document.createElement('iframe');  
      21.                     io.id = frameId;  
      22.                     io.name = frameId;  
      23.                 }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){  
      24.                      var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
      25.                      if(typeof uri== 'boolean'){  
      26.                          io.src = 'javascript:false';  
      27.                      }  
      28.                      else if(typeof uri== 'string'){  
      29.                          io.src = uri;  
      30.                      }  
      31.                 }  
      32.             }  
      33.             else {  
      34.                 var io = document.createElement('iframe');  
      35.                 io.id = frameId;  
      36.                 io.name = frameId;  
      37.             }  
      38.             io.style.position = 'absolute';  
      39.             io.style.top = '-1000px';  
      40.             io.style.left = '-1000px';  
      41.   
      42.             document.body.appendChild(io);  
      43.   
      44.             return io             
      45.     },  
      46.     createUploadForm: function(id, fileElementId, tag_name, tag_link, tag_sort, tag_status, tag_id)  
      47.     {  
      48.         //create form     
      49.         var formId = 'jUploadForm' + id;  
      50.         var fileId = 'jUploadFile' + id;  
      51.         //--  
      52.         var tagNameId = 'tag_name' + id;  
      53.         var tagLinkId = 'tag_link' + id;  
      54.         var tagSortId = 'tag_sort' + id;  
      55.         var tagStatusId = 'tag_status' + id;  
      56.         var tagIdId = 'tag_id' + id;  
      57.         //--end  
      58.         var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');   
      59.         var oldElement = $('#' + fileElementId);  
      60.         var newElement = $(oldElement).clone();  
      61.         //--  
      62.         var tagNameElement = '<input type="text" name="tag_name" value="'+tag_name+'">';    
      63.         var tagLinkElement = '<input type="text" name="tag_link" value="'+tag_link+'">';  
      64.         var tagSortElement = '<input type="text" name="tag_sort" value="'+tag_sort+'">';  
      65.         var tagStatusElement = '<input type="text" name="tag_status" value="'+tag_status+'">';  
      66.         var tagIdElement = '<input type="text" name="tag_id" value="'+tag_id+'">';  
      67.         //--end  
      68.         $(oldElement).attr('id', fileId);  
      69.         $(oldElement).before(newElement);  
      70.         $(oldElement).appendTo(form);  
      71.         //--  
      72.         $(tagNameElement).appendTo(form);  
      73.         $(tagLinkElement).appendTo(form);  
      74.         $(tagSortElement).appendTo(form);  
      75.         $(tagStatusElement).appendTo(form);  
      76.         $(tagIdElement).appendTo(form);  
      77.         //--end  
      78.         //set attributes  
      79.         $(form).css('position''absolute');  
      80.         $(form).css('top''-1200px');  
      81.         $(form).css('left''-1200px');  
      82.         $(form).appendTo('body');         
      83.         return form;  
      84.     },  
      85.   
      86.     ajaxFileUpload: function(s) {  
      87.         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout          
      88.         s = jQuery.extend({}, jQuery.ajaxSettings, s);  
      89.         var id = new Date().getTime()          
      90.         var form = jQuery.createUploadForm(id, s.fileElementId, s.tag_name, s.tag_link, s.tag_sort, s.tag_status, s.tag_id);  
      91.         var io = jQuery.createUploadIframe(id, s.secureuri);  
      92.         var frameId = 'jUploadFrame' + id;  
      93.         var formId = 'jUploadForm' + id;          
      94.         // Watch for a new set of requests  
      95.         if ( s.global && ! jQuery.active++ )  
      96.         {  
      97.             jQuery.event.trigger( "ajaxStart" );  
      98.         }              
      99.         var requestDone = false;  
      100.         // Create the request object  
      101.         var xml = {}     
      102.         if ( s.global )  
      103.             jQuery.event.trigger("ajaxSend", [xml, s]);  
      104.         // Wait for a response to come back  
      105.         var uploadCallback = function(isTimeout)  
      106.         {             
      107.             var io = document.getElementById(frameId);  
      108.             try   
      109.             {                 
      110.                 if(io.contentWindow)  
      111.                 {  
      112.                      xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;  
      113.                      xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;  
      114.                        
      115.                 }else if(io.contentDocument)  
      116.                 {  
      117.                      xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;  
      118.                     xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;  
      119.                 }                         
      120.             }catch(e)  
      121.             {  
      122.                 jQuery.handleError(s, xml, null, e);  
      123.             }  
      124.             if ( xml || isTimeout == "timeout")   
      125.             {                 
      126.                 requestDone = true;  
      127.                 var status;  
      128.                 try {  
      129.                     status = isTimeout != "timeout" ? "success" : "error";  
      130.                     // Make sure that the request was successful or notmodified  
      131.                     if ( status != "error" )  
      132.                     {  
      133.                         // process the data (runs the xml through httpData regardless of callback)  
      134.                         var data = jQuery.uploadHttpData( xml, s.dataType );      
      135.                         // If a local callback was specified, fire it and pass it the data  
      136.                         if ( s.success )  
      137.                             s.success( data, status );  
      138.       
      139.                         // Fire the global callback  
      140.                         if( s.global )  
      141.                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );  
      142.                     } else  
      143.                         jQuery.handleError(s, xml, status);  
      144.                 } catch(e)   
      145.                 {  
      146.                     status = "error";  
      147.                     jQuery.handleError(s, xml, status, e);  
      148.                 }  
      149.   
      150.                 // The request was completed  
      151.                 if( s.global )  
      152.                     jQuery.event.trigger( "ajaxComplete", [xml, s] );  
      153.   
      154.                 // Handle the global AJAX counter  
      155.                 if ( s.global && ! --jQuery.active )  
      156.                     jQuery.event.trigger( "ajaxStop" );  
      157.   
      158.                 // Process result  
      159.                 if ( s.complete )  
      160.                     s.complete(xml, status);  
      161.   
      162.                 jQuery(io).unbind()  
      163.   
      164.                 setTimeout(function()  
      165.                                     {   try   
      166.                                         {  
      167.                                             $(io).remove();  
      168.                                             $(form).remove();     
      169.                                               
      170.                                         } catch(e)   
      171.                                         {  
      172.                                             jQuery.handleError(s, xml, null, e);  
      173.                                         }                                     
      174.   
      175.                                     }, 100)  
      176.   
      177.                 xml = null  
      178.   
      179.             }  
      180.         }  
      181.         // Timeout checker  
      182.         if ( s.timeout > 0 )   
      183.         {  
      184.             setTimeout(function(){  
      185.                 // Check to see if the request is still happening  
      186.                 if( !requestDone ) uploadCallback( "timeout" );  
      187.             }, s.timeout);  
      188.         }  
      189.         try   
      190.         {  
      191.            // var io = $('#' + frameId);  
      192.             var form = $('#' + formId);  
      193.             $(form).attr('action', s.url);  
      194.             $(form).attr('method''POST');  
      195.             $(form).attr('target', frameId);  
      196.             if(form.encoding)  
      197.             {  
      198.                 form.encoding = 'multipart/form-data';                
      199.             }  
      200.             else  
      201.             {                 
      202.                 form.enctype = 'multipart/form-data';  
      203.             }             
      204.             $(form).submit();  
      205.   
      206.         } catch(e)   
      207.         {             
      208.             jQuery.handleError(s, xml, null, e);  
      209.         }  
      210.         if(window.attachEvent){  
      211.             document.getElementById(frameId).attachEvent('onload', uploadCallback);  
      212.         }  
      213.         else{  
      214.             document.getElementById(frameId).addEventListener('load', uploadCallback, false);  
      215.         }         
      216.         return {abort: function () {}};   
      217.   
      218.     },  
      219.   
      220.     uploadHttpData: function( r, type ) {  
      221.         var data = !type;  
      222.         data = type == "xml" || data ? r.responseXML : r.responseText;  
      223.         // If the type is "script", eval it in global context  
      224.         if ( type == "script" )  
      225.             jQuery.globalEval( data );  
      226.         // Get the JavaScript object, if JSON is used.  
      227.         if ( type == "json" )  
      228.             eval( "data = " + data );  
      229.         // evaluate scripts within html  
      230.         if ( type == "html" )  
      231.             jQuery("<div>").html(data).evalScripts();  
      232.             //alert($('param', data).each(function(){alert($(this).attr('value'));}));  
      233.         return data;  
      234.     }  
      235. })  
  • 相关阅读:
    CentOS 7中为Yum设置代理
    在 .NET Core项目中使用UEditor图片、文件上传服务
    Android开发:通过 webview 将网页打包成安卓应用
    ElasticSearch:组合查询或复合查询
    ElasticSearch:常用的基础查询与过滤器
    SpringBoot:Java High Level REST Client 搜索 API
    SpingBoot:整合Elasticsearch7.2.0
    Linux:oracle11.2.0dbca静默建库
    Docker:跨主机通信
    Mysql无法启动情况下,如何恢复数据?
  • 原文地址:https://www.cnblogs.com/littleCode/p/3499708.html
Copyright © 2011-2022 走看看