ajaxFileUpload 文件异步上传

前端之家收集整理的这篇文章主要介绍了ajaxFileUpload 文件异步上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. jQuery.extend({
  2. createUploadIframe: function (id,uri) {
  3. //create frame
  4. var frameId = 'jUploadFrame' + id;
  5. var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
  6. if (window.ActiveXObject) {
  7. if (typeof uri == 'boolean') {
  8. iframeHtml += ' src="' + 'javascript:false' + '"';
  9.  
  10. }
  11. else if (typeof uri == 'string') {
  12. iframeHtml += ' src="' + uri + '"';
  13.  
  14. }
  15. }
  16. iframeHtml += ' />';
  17. jQuery(iframeHtml).appendTo(document.body);
  18.  
  19. return jQuery('#' + frameId).get(0);
  20. },createUploadForm: function (id,fileElementId,data) {
  21. //create form
  22. var formId = 'jUploadForm' + id;
  23. var fileId = 'jUploadFile' + id;
  24. var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
  25. if (data) {
  26. for (var i in data) {
  27. jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
  28. }
  29. }
  30. var oldElement = jQuery('#' + fileElementId);
  31. var newElement = jQuery(oldElement).clone(true);
  32. jQuery(oldElement).attr('id',fileId);
  33. jQuery(oldElement).before(newElement);
  34. jQuery(oldElement).appendTo(form);
  35.  
  36.  
  37.  
  38. //set attributes
  39. jQuery(form).css('position','absolute');
  40. jQuery(form).css('top','-1200px');
  41. jQuery(form).css('left','-1200px');
  42. jQuery(form).appendTo('body');
  43. return form;
  44. },ajaxFileUpload: function (s) {
  45. // TODO introduce global settings,allowing the client to modify them for all requests,not only timeout
  46. s = jQuery.extend({},jQuery.ajaxSettings,s);
  47. var id = new Date().getTime()
  48. var form = jQuery.createUploadForm(id,s.fileElementId,(typeof (s.data) == 'undefined' ? false : s.data));
  49. var io = jQuery.createUploadIframe(id,s.secureuri);
  50. var frameId = 'jUploadFrame' + id;
  51. var formId = 'jUploadForm' + id;
  52. // Watch for a new set of requests
  53. if (s.global && !jQuery.active++) {
  54. jQuery.event.trigger("ajaxStart");
  55. }
  56. var requestDone = false;
  57. // Create the request object
  58. var xml = {}
  59. if (s.global)
  60. jQuery.event.trigger("ajaxSend",[xml,s]);
  61. // Wait for a response to come back
  62. var uploadCallback = function (isTimeout) {
  63. var io = document.getElementById(frameId);
  64. try {
  65. if (io.contentWindow) {
  66. xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
  67. xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
  68.  
  69. } else if (io.contentDocument) {
  70. xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
  71. xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
  72. }
  73. } catch (e) {
  74. jQuery.handleError(s,xml,null,e);
  75. }
  76. if (xml || isTimeout == "timeout") {
  77. requestDone = true;
  78. var status;
  79. try {
  80. status = isTimeout != "timeout" ? "success" : "error";
  81. // Make sure that the request was successful or notmodified
  82. if (status != "error") {
  83. // process the data (runs the xml through httpData regardless of callback)
  84. var data = jQuery.uploadHttpData(xml,s.dataType);
  85. // If a local callback was specified,fire it and pass it the data
  86. if (s.success)
  87. s.success(data,status);
  88.  
  89. // Fire the global callback
  90. if (s.global)
  91. jQuery.event.trigger("ajaxSuccess",s]);
  92. } else
  93. jQuery.handleError(s,status);
  94. } catch (e) {
  95. status = "error";
  96. jQuery.handleError(s,status,e);
  97. }
  98.  
  99. // The request was completed
  100. if (s.global)
  101. jQuery.event.trigger("ajaxComplete",s]);
  102.  
  103. // Handle the global AJAX counter
  104. if (s.global && ! --jQuery.active)
  105. jQuery.event.trigger("ajaxStop");
  106.  
  107. // Process result
  108. if (s.complete)
  109. s.complete(xml,status);
  110.  
  111. jQuery(io).unbind()
  112.  
  113. setTimeout(function () {
  114. try {
  115. jQuery(io).remove();
  116. jQuery(form).remove();
  117.  
  118. } catch (e) {
  119. jQuery.handleError(s,e);
  120. }
  121.  
  122. },100)
  123.  
  124. xml = null
  125.  
  126. }
  127. }
  128. // Timeout checker
  129. if (s.timeout > 0) {
  130. setTimeout(function () {
  131. // Check to see if the request is still happening
  132. if (!requestDone) uploadCallback("timeout");
  133. },s.timeout);
  134. }
  135. try {
  136.  
  137. var form = jQuery('#' + formId);
  138. jQuery(form).attr('action',s.url);
  139. jQuery(form).attr('method','POST');
  140. jQuery(form).attr('target',frameId);
  141. if (form.encoding) {
  142. jQuery(form).attr('encoding','multipart/form-data');
  143. }
  144. else {
  145. jQuery(form).attr('enctype','multipart/form-data');
  146. }
  147. jQuery(form).submit();
  148.  
  149. } catch (e) {
  150. jQuery.handleError(s,e);
  151. }
  152.  
  153. jQuery('#' + frameId).load(uploadCallback);
  154. return { abort: function () { } };
  155.  
  156. },uploadHttpData: function (r,type) {
  157. var data = !type;
  158. data = type == "xml" || data ? r.responseXML : r.responseText;
  159. // If the type is "script",eval it in global context
  160. if (type == "script")
  161. jQuery.globalEval(data);
  162. // Get the JavaScript object,if JSON is used.
  163. if (type == "json")
  164. eval("data = " + data);
  165. // evaluate scripts within html
  166. if (type == "html")
  167. jQuery("<div>").html(data).evalScripts();
  168.  
  169. return data;
  170. },handleError: function (s,xhr,e) {
  171. // If a local callback was specified,fire it
  172. if (s.error) {
  173. s.error.call(s.context || s,e);
  174. }
  175.  
  176. // Fire the global callback
  177. if (s.global) {
  178. (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError",[xhr,s,e]);
  179. }
  180. }
  181. })

var newElement = jQuery(oldElement).clone(true);

设为true 之后,支持ajaxUpload的多次调用

猜你在找的Ajax相关文章