如何让ajaxfileupload.js支持IE9,IE10,并可以传递多个参数?

穿精又带淫゛_ 提交于 2020-03-01 02:47:08

exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5)

思路分析:
第一步:兼容IE9,firefox,Opera,Safari等浏览器;
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "yui-history-iframe");
iframe.setAttribute("src", "../../images/defaults/transparent-pixel.gif");
iframe.setAttribute("style","position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;")

第二步:兼容IE6-8:由于ie6-8 不能修改iframe的name属性
var oFrame = isIE ? document.createElement("<iframe name=/"" + this._FrameName + "/">") : document.createElement("iframe");
oFrame.name = "iframName";

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

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

[javascript]  view plain copy
  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 plain copy
  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 plain copy
  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 plain copy
  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 plain copy
  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 plain copy
  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 plain copy
  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. })  
转载:http://blog.csdn.net/tiangsu_php/article/details/7795927
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!