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

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

来源：oschina

链接：https://my.oschina.net/u/200838/blog/144974