require-upload.js 7.8 KB

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