jquery.html5uploader.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. (function ($) {
  2. $.fn.html5Uploader = function (options) {
  3. var crlf = '\r\n';
  4. var boundary = "iloveigloo";
  5. var dashes = "--";
  6. var settings = {
  7. "name": "uploadedFile",
  8. "postUrl": "Upload.aspx",
  9. "onClientAbort": null,
  10. "onClientError": null,
  11. "onClientLoad": null,
  12. "onClientLoadEnd": null,
  13. "onClientLoadStart": null,
  14. "onClientProgress": null,
  15. "onServerAbort": null,
  16. "onServerError": null,
  17. "onServerLoad": null,
  18. "onServerLoadStart": null,
  19. "onServerProgress": null,
  20. "onServerReadyStateChange": null,
  21. "onSuccess": null
  22. };
  23. if (options) {
  24. $.extend(settings, options);
  25. }
  26. return this.each(function (options) {
  27. var $this = $(this);
  28. if ($this.is("[type='file']")) {
  29. $this
  30. .bind("change", function () {
  31. var files = this.files;
  32. for (var i = 0; i < files.length; i++) {
  33. fileHandler(files[i]);
  34. }
  35. });
  36. } else {
  37. $this
  38. .bind("dragenter dragover", function () {
  39. $(this).addClass("hover");
  40. return false;
  41. })
  42. .bind("dragleave", function () {
  43. $(this).removeClass("hover");
  44. return false;
  45. })
  46. .bind("drop", function (e) {
  47. $(this).removeClass("hover");
  48. var files = e.originalEvent.dataTransfer.files;
  49. for (var i = 0; i < files.length; i++) {
  50. fileHandler(files[i]);
  51. }
  52. return false;
  53. });
  54. }
  55. });
  56. function fileHandler(file) {
  57. var fileReader = new FileReader();
  58. fileReader.onabort = function (e) {
  59. if (settings.onClientAbort) {
  60. settings.onClientAbort(e, file);
  61. }
  62. };
  63. fileReader.onerror = function (e) {
  64. if (settings.onClientError) {
  65. settings.onClientError(e, file);
  66. }
  67. };
  68. fileReader.onload = function (e) {
  69. if (settings.onClientLoad) {
  70. settings.onClientLoad(e, file);
  71. }
  72. };
  73. fileReader.onloadend = function (e) {
  74. if (settings.onClientLoadEnd) {
  75. settings.onClientLoadEnd(e, file);
  76. }
  77. };
  78. fileReader.onloadstart = function (e) {
  79. if (settings.onClientLoadStart) {
  80. settings.onClientLoadStart(e, file);
  81. }
  82. };
  83. fileReader.onprogress = function (e) {
  84. if (settings.onClientProgress) {
  85. settings.onClientProgress(e, file);
  86. }
  87. };
  88. fileReader.readAsDataURL(file);
  89. var xmlHttpRequest = new XMLHttpRequest();
  90. xmlHttpRequest.upload.onabort = function (e) {
  91. if (settings.onServerAbort) {
  92. settings.onServerAbort(e, file);
  93. }
  94. };
  95. xmlHttpRequest.upload.onerror = function (e) {
  96. if (settings.onServerError) {
  97. settings.onServerError(e, file);
  98. }
  99. };
  100. xmlHttpRequest.upload.onload = function (e) {
  101. if (settings.onServerLoad) {
  102. settings.onServerLoad(e, file);
  103. }
  104. };
  105. xmlHttpRequest.upload.onloadstart = function (e) {
  106. if (settings.onServerLoadStart) {
  107. settings.onServerLoadStart(e, file);
  108. }
  109. };
  110. xmlHttpRequest.upload.onprogress = function (e) {
  111. if (settings.onServerProgress) {
  112. settings.onServerProgress(e, file);
  113. }
  114. };
  115. xmlHttpRequest.onreadystatechange = function (e) {
  116. if (settings.onServerReadyStateChange) {
  117. settings.onServerReadyStateChange(e, file, xmlHttpRequest.readyState);
  118. }
  119. if (settings.onSuccess && xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
  120. settings.onSuccess(e, file, xmlHttpRequest.responseText);
  121. }
  122. };
  123. xmlHttpRequest.open("POST", settings.postUrl, true);
  124. if (file.getAsBinary) { // Firefox
  125. var data = dashes + boundary + crlf +
  126. "Content-Disposition: form-data;" +
  127. "name=\"" + settings.name + "\";" +
  128. "filename=\"" + unescape(encodeURIComponent(file.name)) + "\"" + crlf +
  129. "Content-Type: application/octet-stream" + crlf + crlf +
  130. file.getAsBinary() + crlf +
  131. dashes + boundary + dashes;
  132. xmlHttpRequest.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary);
  133. xmlHttpRequest.sendAsBinary(data);
  134. } else if (window.FormData) { // Chrome
  135. var formData = new FormData();
  136. formData.append(settings.name, file);
  137. xmlHttpRequest.send(formData);
  138. }
  139. }
  140. };
  141. })(jQuery);