ajaxfileupload ie 多参数

2022-06-02 00:18:34

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

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

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

[javascript] view plain copy

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 plain copy

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 plain copy

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 plain copy

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 plain copy

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 form
var 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;
//--end
var 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 plain copy

$.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 plain copy

1. jQuery.extend({
4. createUploadIframe: function(id, uri)
5. {
6. //create frame
7. var frameId = 'jUploadFrame' + id;
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. // }
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';
42. document.body.appendChild(io);
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. },
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;
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 );
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. }
150. // The request was completed
151. if( s.global )
152. jQuery.event.trigger( "ajaxComplete", [xml, s] );
154. // Handle the global AJAX counter
155. if ( s.global && ! --jQuery.active )
156. jQuery.event.trigger( "ajaxStop" );
158. // Process result
159. if ( s.complete )
160. s.complete(xml, status);
162. jQuery(io).unbind()
164. setTimeout(function()
165. { try
166. {
167. $(io).remove();
168. $(form).remove();
170. } catch(e)
171. {
172. jQuery.handleError(s, xml, null, e);
173. }
175. }, 100)
177. xml = null
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();
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 () {}};
218. },
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. })

码农公寓

相关文章