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

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

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

[javascript] view plaincopyprint?

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. } 

if(window.ActiveXObject) {    var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');     if(typeof uri== 'boolean'){         io.src = 'javascript:false';     }     else if(typeof uri== 'string'){         io.src = uri;     } }

修改成如下：

[javascript] view plaincopyprint?

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. } 

if(window.ActiveXObject) {   if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){    var io = document.createElement('iframe');    io.id = frameId;    io.name = frameId;    }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){    var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');    if(typeof uri== 'boolean'){        io.src = 'javascript:false';    }    else if(typeof uri== 'string'){        io.src = uri;    }    }}

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

找到以下代码：

[javascript] view plaincopyprint?

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); 

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

增加自己要传递的参数:

[javascript] view plaincopyprint?

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); 

ajaxFileUpload: function(s) {        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        s = jQuery.extend({}, jQuery.ajaxSettings, s);        var id = new Date().getTime()        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 plaincopyprint?

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.     }, 

createUploadForm: function(id, fileElementId, tag_name, tag_link, tag_sort, tag_status, tag_id)//增加tag_name, tag_link, tag_sort, tag_status, tag_id{//create formvar formId = 'jUploadForm' + id;var fileId = 'jUploadFile' + id;//--增加以下内容var tagNameId = 'tag_name' + id;var tagLinkId = 'tag_link' + id;var tagSortId = 'tag_sort' + id;var tagStatusId = 'tag_status' + id;var tagIdId = 'tag_id' + id;//--endvar form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');var oldElement = $('#' + fileElementId);var newElement = $(oldElement).clone();//--增加以下内容var tagNameElement = '<input type="text" name="tag_name" value="'+tag_name+'">';  var tagLinkElement = '<input type="text" name="tag_link" value="'+tag_link+'">';var tagSortElement = '<input type="text" name="tag_sort" value="'+tag_sort+'">';var tagStatusElement = '<input type="text" name="tag_status" value="'+tag_status+'">';var tagIdElement = '<input type="text" name="tag_id" value="'+tag_id+'">';//--end$(oldElement).attr('id', fileId);$(oldElement).before(newElement);$(oldElement).appendTo(form);//--增加以下的内容$(tagNameElement).appendTo(form);$(tagLinkElement).appendTo(form);$(tagSortElement).appendTo(form);$(tagStatusElement).appendTo(form);$(tagIdElement).appendTo(form);//--end//set attributes$(form).css('position', 'absolute');$(form).css('top', '-1200px');$(form).css('left', '-1200px');$(form).appendTo('body');return form;    },

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

修改完后，如何使用？

[javascript] view plaincopyprint?

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.        //以下省略 

 $.ajaxFileUpload({        url:web_url,        secureuri:false,        //以下为增加的传递参数        tag_name:tag_name,tag_link:tag_link,tag_sort:tag_sort,tag_status:tag_status,tag_id:tag_id,        //--end        fileElementId:result[0],        dataType: 'json',        success: function (data,status){}        //以下省略

OK，done.

附ajaxfileupload完整版：

[javascript] view plaincopyprint?

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. })