jquery.pasteupload.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. // https://github.com/yuezhongxin/paste-upload-image.js
  2. (function ($) {
  3. var isImage, isImageForDrop, getFilename, getMimeType;
  4. isImage = function (data) {
  5. var i, item;
  6. i = 0;
  7. while (i < data.clipboardData.items.length) {
  8. item = data.clipboardData.items[i];
  9. if (item.type.indexOf("image") !== -1) {
  10. return item;
  11. }
  12. i++;
  13. }
  14. return false;
  15. };
  16. isImageForDrop = function (data) {
  17. var i, item;
  18. i = 0;
  19. while (i < data.dataTransfer.files.length) {
  20. item = data.dataTransfer.files[i];
  21. if (item.type.indexOf("image") !== -1) {
  22. return item;
  23. }
  24. i++;
  25. }
  26. return false;
  27. };
  28. getFilename = function (e) {
  29. var value;
  30. if (window.clipboardData && window.clipboardData.getData) {
  31. value = window.clipboardData.getData("Text");
  32. } else if (e.clipboardData && e.clipboardData.getData) {
  33. value = e.clipboardData.getData("text/plain");
  34. }
  35. value = value.split("\r");
  36. return value[0];
  37. };
  38. getMimeType = function (file, filename) {
  39. var mimeType = file.type;
  40. var extendName = filename.substring(filename.lastIndexOf('.') + 1);
  41. if (mimeType != 'image/' + extendName) {
  42. return 'image/' + extendName;
  43. }
  44. return mimeType;
  45. };
  46. $.fn.pasteUploadImage = function (options) {
  47. options = $.extend({}, $.fn.pasteUploadImage.defaults, options, {fileType: 'image'});
  48. return this.each(function () {
  49. var that = $(this);
  50. that.on('paste', function (event) {
  51. var filename, image, pasteEvent;
  52. pasteEvent = event.originalEvent;
  53. if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
  54. image = isImage(pasteEvent);
  55. if (image) {
  56. event.preventDefault();
  57. filename = getFilename(pasteEvent) || options.defaultImageName;
  58. return that.uploadFile(image.getAsFile(), filename, options);
  59. }
  60. }
  61. });
  62. that.on('drop', function (event) {
  63. var filename, image, pasteEvent;
  64. pasteEvent = event.originalEvent;
  65. if (pasteEvent.dataTransfer && pasteEvent.dataTransfer.files) {
  66. image = isImageForDrop(pasteEvent);
  67. if (image) {
  68. event.preventDefault();
  69. filename = pasteEvent.dataTransfer.files[0].name || options.defaultImageName;
  70. return that.uploadFile(image, filename, options);
  71. }
  72. }
  73. });
  74. });
  75. };
  76. $.fn.insertToTextArea = function (filename, url) {
  77. var options = $(this).data("pu-options") || $.fn.pasteUploadImage.defaults;
  78. return $(this).val(function (index, val) {
  79. return val.replace("{{" + filename + "(" + options.uploadingText + ")}}", (options.fileType == 'image' ? '!' : '') + "[" + (filename.match(/^[a-zA-Z0-9_\u4e00-\u9fa5\.\-]+$/) ? filename : url.substring(url.lastIndexOf('/') + 1)) + "](" + url + ")" + "\n");
  80. });
  81. };
  82. $.fn.removeLoadingText = function (filename) {
  83. var options = $(this).data("pu-options") || $.fn.pasteUploadImage.defaults;
  84. return $(this).val(function (index, val) {
  85. return val.replace("{{" + filename + "(" + options.uploadingText + ")}}", "\n");
  86. });
  87. };
  88. $.fn.uploadFile = function (file, filename, options) {
  89. var that = $(this);
  90. var options = $.extend(true, {}, $.fn.pasteUploadImage.defaults, options || {});
  91. that.data("pu-options", options);
  92. var text = "{{" + filename + "(" + options.uploadingText + ")}}";
  93. that.pasteText(text);
  94. var formData = new FormData();
  95. formData.append(options.fileName, file);
  96. if (options.appendMimetype) {
  97. formData.append("mimeType", getMimeType(file, filename));
  98. }
  99. var ajaxOptions = {
  100. url: '',
  101. data: formData,
  102. type: 'post',
  103. processData: false,
  104. contentType: false,
  105. dataType: 'json',
  106. success: function (data) {
  107. if (typeof options.success == 'function') {
  108. if (false === options.success.apply(that, [data, filename, file])) {
  109. return;
  110. }
  111. }
  112. if (data.success) {
  113. return that.insertToTextArea(filename, data.message, options);
  114. }
  115. return that.removeLoadingText(filename);
  116. },
  117. error: function (xOptions, textStatus) {
  118. if (typeof options.error == 'function') {
  119. if (false === options.error.apply(that, [{}, filename, file])) {
  120. return;
  121. }
  122. }
  123. that.removeLoadingText("");
  124. }
  125. };
  126. if (typeof options.ajaxOptions === 'object') {
  127. ajaxOptions = $.extend(true, ajaxOptions, options.ajaxOptions);
  128. } else {
  129. ajaxOptions.url = options.ajaxOptions;
  130. }
  131. $.ajax(ajaxOptions);
  132. };
  133. $.fn.pasteText = function (text) {
  134. var that = $(this);
  135. var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
  136. caretStart = that[0].selectionStart;
  137. caretEnd = that[0].selectionEnd;
  138. textEnd = that.val().length;
  139. beforeSelection = that.val().substring(0, caretStart);
  140. afterSelection = that.val().substring(caretEnd, textEnd);
  141. that.val(beforeSelection + text + afterSelection);
  142. that.get(0).setSelectionRange(caretStart + text.length, caretEnd + text.length);
  143. return that.trigger("input");
  144. };
  145. $.fn.pasteUploadImage.defaults = {
  146. success: null,
  147. error: null,
  148. ajaxOptions: '',
  149. fileName: 'imageFile',
  150. appendMimetype: true,
  151. defaultImageName: 'image.png',
  152. uploadingText: 'uploading...',
  153. };
  154. })(jQuery);