require-upload.js 8.1 KB

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