ExtJS+Jquery实现文件上传

 

1. jQuery.extend({ 
3. createUploadIframe: function(id, uri){ 
5. var frameId = 'jQuery' + id; 
7. if(window.ActiveXObject) { 
8. var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); 
10. if(typeof uri== 'boolean'){ 
11. io.src = 'javascript:false'; 
12. } 
13. else if(typeof uri== 'string'){ 
14. io.src = uri; 
15. } 
16. } 
17. else { 
18. var io = document.createElement('iframe'); 
19. io.id = frameId; 
20. io.name = frameId; 
21. } 
23. io.style.position = 'absolute'; 
24. io.style.top = '-1000px'; 
25. io.style.left = '-1000px'; 
27. document.body.appendChild(io); 
29. return io 
31. }, 
33. ajaxUpload: function(s) { 
34. // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 
35. s = jQuery.extend({}, jQuery.ajaxSettings, s); 
37. var id = new Date().getTime() 
38. io = jQuery.createUploadIframe(id, s.secureuri) 
40. // Watch for a new set of requests 
41. if ( s.global && ! jQuery.active++ ) 
42. jQuery.event.trigger( "ajaxStart" ); 
44. var requestDone = false; 
46. // Create the request object 
47. var xml = {} 
48. if ( s.global ) 
49. jQuery.event.trigger("ajaxSend", [xml, s]); 
51. // Wait for a response to come back 
52. var uploadCallback = function(isTimeout){ 
53. try { 
54. xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; 
55. xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; 
56. } 
57. catch(e){} 
58. if ( xml || isTimeout == "timeout") { 
59. requestDone = true; 
60. var status; 
61. try { 
62. status = isTimeout != "timeout" ? "success" : "error"; 
63. // Make sure that the request was successful or notmodified 
64. if ( status != "error" ) { 
65. // process the data (runs the xml through httpData regardless of callback) 
66. var data = jQuery.uploadHttpData( xml, s.dataType ); 
68. // If a local callback was specified, fire it and pass it the data 
69. if ( s.success ) 
70. s.success( data, status ); 
72. // Fire the global callback 
73. if( s.global ) 
74. jQuery.event.trigger( "ajaxSuccess", [xml, s] ); 
75. } else 
76. jQuery.handleError(s, xml, status); 
77. } catch(e) { 
78. status = "error"; 
79. jQuery.handleError(s, xml, status, e); 
80. } 
82. // The request was completed 
83. if( s.global ) 
84. jQuery.event.trigger( "ajaxComplete", [xml, s] ); 
86. // Handle the global AJAX counter 
87. if ( s.global && ! --jQuery.active ) 
88. jQuery.event.trigger( "ajaxStop" ); 
90. // Process result 
91. if ( s.complete ) 
92. s.complete(xml, status); 
94. // jQuery(io).unbind() 
96. // setTimeout(function(){ document.body.removeChild(io); }, 100) 
98. xml = null 
100. } 
101. } 
102. // Timeout checker 
103. if ( s.timeout > 0 ) { 
104. setTimeout(function(){ 
105. // Check to see if the request is still happening 
106. if( !requestDone ) uploadCallback( "timeout" ); 
107. }, s.timeout); 
108. } 
109. try { 
110. var frameId = 'jQuery' + id; 
111. var io = document.getElementById(frameId); 
112. // Initialize the HTML form properties in case they are 
113. // not defined in the HTML form. 
114. s.uploadform.action = s.url; 
115. s.uploadform.method = 'POST'; 
116. s.uploadform.target = frameId; 
118. // Add extra data that may have been already passed. 
119. if (s.data) { 
120. var oEls = s.data.split('&'); 
121. for (var i=0; i < oEls.length; i++ ){ 
122. var thisEl = oEls[i].split('='); 
123. var thisFormEl = document.createElement('input'); 
124. thisFormEl.type = 'hidden'; 
125. thisFormEl.name = thisEl[0]; 
126. thisFormEl.value = thisEl[1]; 
127. s.uploadform.appendChild(thisFormEl); 
128. } 
130. } 
133. if(s.uploadform.encoding){ 
134. // IE does not respect property enctype for HTML forms. 
135. // Instead use property encoding. 
136. s.uploadform.encoding = 'multipart/form-data'; 
137. } 
138. else{ 
139. s.uploadform.enctype = 'multipart/form-data'; 
140. } 
142. s.uploadform.submit(); 
144. } catch(e) { 
145. jQuery.handleError(s, xml, null, e); 
146. } 
148. if(window.attachEvent){ 
149. io.attachEvent('onload', uploadCallback); 
150. } 
151. else{ 
152. io.addEventListener('load', uploadCallback, false); 
153. } 
155. return {abort: function () {}}; 
157. }, 
159. uploadHttpData: function( r, type ) { 
160. var data = !type; 
161. data = type == "xml" || data ? r.responseXML : r.responseText; 
162. // If the type is "script", eval it in global context 
163. if ( type == "script" ) 
164. jQuery.globalEval( data ); 
166. // Get the JavaScript object, if JSON is used. 
167. if ( type == "json" ) 
168. eval( "data = " + data ); 
170. // evaluate scripts within html 
171. if ( type == "html" ) 
172. jQuery("<div>").html(data).evalScripts(); 
174. return data; 
175. } 
176. }) 
178. Ext.lib.Ajax.formRequest = function(form, uri, cb, data, isUpload, sslUri){ 
179. var createComplete = function(cb){ 
180. return function(xhr, status){ 
181. if((status == 'error' || status == 'timeout') && cb.failure){ 
182. cb.failure.call(cb.scope||window, { 
183. responseText: xhr.responseText, 
184. responseXML : xhr.responseXML, 
185. argument: cb.argument 
186. }); 
187. }else if(cb.success){ 
188. cb.success.call(cb.scope||window, { 
189. responseText: xhr.responseText, 
190. responseXML : xhr.responseXML, 
191. argument: cb.argument 
192. }); 
193. } 
194. }; 
195. }; 
197. if (isUpload) { 
198. jQuery.ajaxUpload({ 
199. uploadform: form, 
200. data: data, 
201. url: uri, 
202. secureuri: sslUri, 
203. complete: createComplete(cb) 
204. }); 
205. } else { 
206. jQuery.ajax({ 
207. type: Ext.getDom(form).method ||'POST', 
208. url: uri, 
209. data: jQuery(form).formSerialize()+(data?'&'+data:''), 
210. timeout: cb.timeout, 
211. complete: createComplete(cb) 
212. }); 
213. } 
214. };