ajaxfileupload.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. jQuery.extend({
  2. createUploadIframe: function (id, uri) {
  3. //create frame
  4. var frameId = 'jUploadFrame' + id
  5. if (window.ActiveXObject) {
  6. var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />')
  7. if (typeof uri == 'boolean') {
  8. io.src = 'javascript:false'
  9. } else if (typeof uri == 'string') {
  10. io.src = uri
  11. }
  12. } else {
  13. var io = document.createElement('iframe')
  14. io.id = frameId
  15. io.name = frameId
  16. }
  17. io.style.position = 'absolute'
  18. io.style.top = '-1000px'
  19. io.style.left = '-1000px'
  20. document.body.appendChild(io)
  21. return io
  22. },
  23. createUploadForm: function (id, fileElementId) {
  24. //create form
  25. var formId = 'jUploadForm' + id
  26. var fileId = 'jUploadFile' + id
  27. var form = $(
  28. '<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>')
  29. var oldElement = $('#' + fileElementId)
  30. var newElement = $(oldElement).clone()
  31. $(oldElement).attr('id', fileId)
  32. $(oldElement).before(newElement)
  33. $(oldElement).appendTo(form)
  34. //set attributes
  35. $(form).css('position', 'absolute')
  36. $(form).css('top', '-1200px')
  37. $(form).css('left', '-1200px')
  38. $(form).appendTo('body')
  39. return form
  40. },
  41. addOtherRequestsToForm: function (form, data) {
  42. // add extra parameter
  43. var originalElement = $('<input type="hidden" name="" value="">')
  44. for (var key in data) {
  45. name = key
  46. value = data[key]
  47. var cloneElement = originalElement.clone()
  48. cloneElement.attr({ 'name': name, 'value': value })
  49. $(cloneElement).appendTo(form)
  50. }
  51. return form
  52. },
  53. ajaxFileUpload: function (s) {
  54. // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
  55. s = jQuery.extend({}, jQuery.ajaxSettings, s)
  56. var id = new Date().getTime()
  57. var form = jQuery.createUploadForm(id, s.fileElementId)
  58. if (s.data) form = jQuery.addOtherRequestsToForm(form, s.data)
  59. var io = jQuery.createUploadIframe(id, s.secureuri)
  60. var frameId = 'jUploadFrame' + id
  61. var formId = 'jUploadForm' + id
  62. // Watch for a new set of requests
  63. if (s.global && !jQuery.active++) {
  64. jQuery.event.trigger('ajaxStart')
  65. }
  66. var requestDone = false
  67. // Create the request object
  68. var xml = {}
  69. if (s.global)
  70. jQuery.event.trigger('ajaxSend', [xml, s])
  71. // Wait for a response to come back
  72. var uploadCallback = function (isTimeout) {
  73. var io = document.getElementById(frameId)
  74. try {
  75. if (io.contentWindow) {
  76. xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null
  77. xml.responseXML = io.contentWindow.document.XMLDocument
  78. ? io.contentWindow.document.XMLDocument
  79. : io.contentWindow.document
  80. } else if (io.contentDocument) {
  81. xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null
  82. xml.responseXML = io.contentDocument.document.XMLDocument
  83. ? io.contentDocument.document.XMLDocument
  84. : io.contentDocument.document
  85. }
  86. } catch (e) {
  87. jQuery.handleError(s, xml, null, e)
  88. }
  89. if (xml || isTimeout == 'timeout') {
  90. requestDone = true
  91. var status
  92. try {
  93. status = isTimeout != 'timeout' ? 'success' : 'error'
  94. // Make sure that the request was successful or notmodified
  95. if (status != 'error') {
  96. // process the data (runs the xml through httpData regardless of callback)
  97. var data = jQuery.uploadHttpData(xml, s.dataType)
  98. // If a local callback was specified, fire it and pass it the data
  99. if (s.success)
  100. s.success(data, status)
  101. // Fire the global callback
  102. if (s.global)
  103. jQuery.event.trigger('ajaxSuccess', [xml, s])
  104. } else
  105. jQuery.handleError(s, xml, status)
  106. } catch (e) {
  107. status = 'error'
  108. jQuery.handleError(s, xml, status, e)
  109. }
  110. // The request was completed
  111. if (s.global)
  112. jQuery.event.trigger('ajaxComplete', [xml, s])
  113. // Handle the global AJAX counter
  114. if (s.global && !--jQuery.active)
  115. jQuery.event.trigger('ajaxStop')
  116. // Process result
  117. if (s.complete)
  118. s.complete(xml, status)
  119. jQuery(io).unbind()
  120. setTimeout(function () {
  121. try {
  122. $(io).remove()
  123. $(form).remove()
  124. } catch (e) {
  125. jQuery.handleError(s, xml, null, e)
  126. }
  127. }, 100)
  128. xml = null
  129. }
  130. }
  131. if (window.attachEvent) {
  132. document.getElementById(frameId).attachEvent('onload', uploadCallback)
  133. } else {
  134. document.getElementById(frameId).addEventListener('load', uploadCallback, false)
  135. }
  136. // Timeout checker
  137. if (s.timeout > 0) {
  138. setTimeout(function () {
  139. // Check to see if the request is still happening
  140. if (!requestDone) uploadCallback('timeout')
  141. }, s.timeout)
  142. }
  143. try {
  144. // var io = $('#' + frameId);
  145. var form = $('#' + formId)
  146. $(form).attr('action', s.url)
  147. $(form).attr('method', 'POST')
  148. $(form).attr('target', frameId)
  149. if (form.encoding) {
  150. form.encoding = 'multipart/form-data'
  151. } else {
  152. form.enctype = 'multipart/form-data'
  153. }
  154. form.ajaxSubmit({
  155. iframeTarget: document.getElementById(frameId),
  156. beforeSubmit: function (arr, $form, options) {
  157. arr.push({
  158. Authorization: 'Bearer ' + auth,
  159. })
  160. },
  161. success: function (result) {
  162. document.getElementById(frameId).contentWindow.document.body.innerHTML = '<pre>' + JSON.stringify(result) + '</pre>'
  163. uploadCallback()
  164. }
  165. })
  166. } catch (e) {
  167. jQuery.handleError(s, xml, null, e)
  168. }
  169. return {
  170. abort: function () {
  171. },
  172. }
  173. },
  174. uploadHttpData: function (r, type) {
  175. var data = !type
  176. data = type == 'xml' || data ? r.responseXML : r.responseText
  177. // If the type is "script", eval it in global context
  178. if (type == 'script')
  179. jQuery.globalEval(data)
  180. // Get the JavaScript object, if JSON is used.
  181. if (type == 'json') {
  182. // If you add mimetype in your response,
  183. // you have to delete the '<pre></pre>' tag.
  184. // The pre tag in Chrome has attribute, so have to use regex to remove
  185. var data = r.responseText
  186. var rx = new RegExp('<pre.*?>(.*?)</pre>', 'i')
  187. var am = rx.exec(data)
  188. //this is the desired data extracted
  189. var data = (am) ? am[1] : '{}' //the only submatch or empty
  190. eval('data = ' + data)
  191. }
  192. // evaluate scripts within html
  193. if (type == 'html')
  194. jQuery('<div>').html(data).evalScripts()
  195. //alert($('param', data).each(function(){alert($(this).attr('value'));}));
  196. return data
  197. },
  198. })