ajaxfileupload ie 多参数

引用:http://blog.csdn.net/tiangsu_php/article/details/7795927

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. })  
原文地址:https://www.cnblogs.com/sode/p/3012525.html