require-upload.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. define(['jquery', 'bootstrap', 'backend', 'config', 'plupload'], function ($, undefined, Backend, Config, Plupload) {
  2. var Upload = {
  3. list: {},
  4. config: {
  5. container: document.body,
  6. classname: '.plupload',
  7. },
  8. api: {
  9. //Plupload上传
  10. plupload: function (element, onAfterUpload) {
  11. element = typeof element == 'undefined' ? Upload.config.classname : element;
  12. $(element, Upload.config.container).each(function () {
  13. var that = this;
  14. var id = $(this).prop("id");
  15. var url = $(this).data("url");
  16. var maxsize = $(this).data("maxsize");
  17. var mimetype = $(this).data("mimetype");
  18. var multipart = $(this).data("multipart");
  19. var multiple = $(this).data("multiple");
  20. //上传URL
  21. url = url ? url : Config.upload.uploadurl;
  22. url = Backend.api.fixurl(url);
  23. //最大可上传
  24. maxsize = maxsize ? maxsize : Config.upload.maxsize;
  25. //文件类型
  26. mimetype = mimetype ? mimetype : Config.upload.mimetype;
  27. //请求的表单参数
  28. multipart = multipart ? multipart : Config.upload.multipart;
  29. //是否支持批量上传
  30. multiple = multiple ? multiple : Config.upload.multiple;
  31. //生成Plupload实例
  32. Upload.list[id] = new Plupload.Uploader({
  33. runtimes: 'html5,flash,silverlight,html4',
  34. multi_selection: multiple, //是否允许多选批量上传
  35. browse_button: id, // 浏览按钮的ID
  36. container: $(this).parent().get(0), //取按钮的上级元素
  37. flash_swf_url: '/assets/libs/plupload/js/Moxie.swf',
  38. silverlight_xap_url: '/assets/libs/plupload/js/Moxie.xap',
  39. filters: {
  40. max_file_size: maxsize,
  41. mime_types: mimetype
  42. },
  43. url: url,
  44. multipart_params: multipart,
  45. init: {
  46. PostInit: function () {
  47. },
  48. FilesAdded: function (up, files) {
  49. Plupload.each(files, function (file) {
  50. //这里可以改成其它的表现形式
  51. //document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
  52. });
  53. $(that).data("bakup-html", $(that).html());
  54. //添加后立即上传
  55. setTimeout(function () {
  56. Upload.list[id].start();
  57. }, 1);
  58. },
  59. UploadProgress: function (up, file) {
  60. //这里可以改成其它的表现形式
  61. //document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
  62. $(that).prop("disabled", true).html("<i class='fa fa-upload'></i> 上传" + file.percent + "%");
  63. },
  64. FileUploaded: function (up, file, info) {
  65. //还原按钮文字及状态
  66. $(that).prop("disabled", false).html($(that).data("bakup-html"));
  67. //这里可以改成其它的表现形式
  68. //document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML += (' [Url]: ' + '<a href="' + url + '" target="_blank">' + url + '</a>');
  69. //这里建议不修改
  70. try {
  71. var ret = JSON.parse(info.response);
  72. if (ret.hasOwnProperty('code')) {
  73. ret.data = ret.code == 200 ? ret : ret.data;
  74. ret.code = ret.code == 200 ? 1 : ret.code;
  75. var data = ret.hasOwnProperty("data") && ret.data != "" ? ret.data : null;
  76. var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
  77. if (ret.code === 1) {
  78. //$("input[data-plupload-id='" + id + "-text']").val(data.url);
  79. if ($(that).data("input-id")) {
  80. $("input#" + $(that).data("input-id")).val(data.url);
  81. }
  82. var afterUpload = $("#" + id).data("after-upload");
  83. if (afterUpload && typeof Upload.api.custom[afterUpload] == 'function') {
  84. Upload.api.custom[afterUpload].call(that, data);
  85. }
  86. if (typeof onAfterUpload == 'function') {
  87. onAfterUpload.call(that, data);
  88. }
  89. } else {
  90. Toastr.error(msg ? msg : __('Operation failed'));
  91. }
  92. } else {
  93. Toastr.error(e.message + "(code:-2)");
  94. }
  95. } catch (e) {
  96. Toastr.error(e.message + "(code:-1)");
  97. }
  98. },
  99. Error: function (up, err) {
  100. Toastr.error(err.message + "(code:" + err.code + ")");
  101. }
  102. }
  103. });
  104. Upload.list[id].init();
  105. });
  106. },
  107. // AJAX异步上传,主要用于Summernote上传回调
  108. send: function (file, callback) {
  109. var data = new FormData();
  110. data.append("file", file);
  111. $.each(Config.upload.multipart, function (k, v) {
  112. data.append(k, v);
  113. });
  114. $.ajax({
  115. url: Config.upload.uploadurl,
  116. data: data,
  117. cache: false,
  118. contentType: false,
  119. processData: false,
  120. type: 'POST',
  121. dataType: 'json',
  122. success: function (ret) {
  123. if (ret.hasOwnProperty("code")) {
  124. ret.data = ret.code == 200 ? ret : ret.data;
  125. ret.code = ret.code == 200 ? 1 : ret.code;
  126. var data = ret.hasOwnProperty("data") && ret.data != "" ? ret.data : null;
  127. var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
  128. if (ret.code === 1) {
  129. // 如果回调存在,则直接调用回调
  130. if (typeof callback == 'function') {
  131. callback.call(this, data);
  132. } else {
  133. Toastr.success(msg ? msg : __('Operation completed'));
  134. }
  135. } else {
  136. Toastr.error(msg ? msg : __('Operation failed'));
  137. }
  138. } else {
  139. Toastr.error(__('Unknown data format'));
  140. }
  141. }, error: function () {
  142. Toastr.error(__('Network error'));
  143. }
  144. });
  145. },
  146. custom: {
  147. //自定义上传完成回调
  148. afteruploadcallback: function (response) {
  149. console.log(this, response);
  150. alert("Custom Callback,Response URL:" + response.url);
  151. },
  152. },
  153. }
  154. };
  155. return Upload;
  156. });