require-upload.js 8.4 KB

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