AddUploadedFile.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. export default class AddUploadedFile {
  2. constructor(Uploder) {
  3. this.uploader = Uploder;
  4. // 已上传的文件
  5. this.uploadedFiles = [];
  6. this.init = false;
  7. }
  8. // 添加已上传文件
  9. add(file) {
  10. let _this = this,
  11. parent = _this.uploader,
  12. options = parent.options,
  13. showImg = parent.isImage(),
  14. html = "";
  15. html += "<li title='" + file.serverPath + "'>";
  16. if (! showImg && options.sortable) {
  17. // 文件排序
  18. html += `
  19. <p style="right: 45px" class="file-action" data-file-act='order' data-order="1" data-id='${file.serverId}'><i class='feather icon-arrow-up'></i></p>
  20. <p style="right: 25px" class="file-action" data-file-act='order' data-order="0" data-id='${file.serverId}'><i class='feather icon-arrow-down'></i></p>
  21. `;
  22. }
  23. if (showImg) {
  24. html += `<p class='imgWrap'><img src='${file.serverUrl}'></p>`
  25. } else if (!options.disabled) {
  26. html += `<p class="file-action" data-file-act="delete" data-id="${file.serverId}"><i class="feather icon-trash red-dark"></i></p>`;
  27. }
  28. html += "<p class='title' style=''><i class='feather icon-check text-white icon-success text-white'></i>";
  29. html += file.serverPath;
  30. html += "</p>";
  31. if (showImg) {
  32. html += "<p class='title' style='margin-bottom:20px;'>&nbsp;</p>";
  33. html += "<div class='file-panel' >";
  34. if (!options.disabled) {
  35. html += `<a class='btn btn-sm btn-white' data-file-act='deleteurl' data-id='${file.serverId}'><i class='feather icon-trash red-dark' style='font-size:13px'></i></a>`;
  36. }
  37. html += `<a class='btn btn-sm btn-white' data-file-act='preview' data-url='${file.serverUrl}' ><i class='feather icon-zoom-in'></i></a>`;
  38. if (options.sortable) {
  39. // 文件排序
  40. html += `
  41. <a class='btn btn-sm btn-white' data-file-act='order' data-order="1" data-id='${file.serverId}'><i class='feather icon-arrow-up'></i></a>
  42. <a class='btn btn-sm btn-white' data-file-act='order' data-order="0" data-id='${file.serverId}'><i class='feather icon-arrow-down'></i></a>
  43. `;
  44. }
  45. html += "</div>";
  46. } else {
  47. }
  48. html += "</li>";
  49. html = $(html);
  50. if (!showImg) {
  51. html.find('.file-type').show();
  52. html.find('.title').show();
  53. parent.$wrapper.css('background', 'transparent');
  54. }
  55. // 删除操作
  56. let deleteFile = function () {
  57. var fileId = $(this).data('id');
  58. // 本地删除
  59. if (options.removable) {
  60. html.remove();
  61. return _this.removeFormFile(fileId);
  62. }
  63. // 发起删除请求
  64. parent.request.delete({serverId: fileId}, function () {
  65. // 移除
  66. html.remove();
  67. _this.removeFormFile(fileId);
  68. });
  69. };
  70. // 删除按钮点击事件
  71. html.find('[data-file-act="deleteurl"]').click(deleteFile);
  72. html.find('[data-file-act="delete"]').click(deleteFile);
  73. // 文件排序
  74. if (options.sortable) {
  75. html.find('[data-file-act="order"').click(function () {
  76. parent.helper.orderFiles($(this));
  77. });
  78. }
  79. // 图片预览
  80. html.find('[data-file-act="preview"]').click(function () {
  81. var url = $(this).data('url');
  82. Dcat.helpers.previewImage(url);
  83. });
  84. parent.formFiles[file.serverId] = file;
  85. parent.input.add(file.serverId);
  86. parent.$files.append(html);
  87. if (showImg) {
  88. setTimeout(function () {
  89. html.css('margin', '5px');
  90. }, _this.init ? 0 : 400);
  91. _this.init = 1;
  92. }
  93. }
  94. // 重新渲染已上传的文件
  95. reRender() {
  96. for (let i in this.uploadedFiles) {
  97. if (this.uploadedFiles[i]) {
  98. this.add(this.uploadedFiles[i])
  99. }
  100. }
  101. }
  102. // 移除已上传文件
  103. removeFormFile(fileId) {
  104. if (!fileId) {
  105. return;
  106. }
  107. let _this = this,
  108. parent = _this.uploader,
  109. uploader = _this.uploader,
  110. file = parent.formFiles[fileId];
  111. parent.input.delete(fileId);
  112. delete parent.formFiles[fileId];
  113. if (uploader && !file.fake) {
  114. uploader.removeFile(file);
  115. }
  116. parent.status.switch('decrOriginalFileNum');
  117. parent.status.switch('incrFileNumLimit');
  118. if (! Dcat.helpers.len(parent.formFiles) && ! Dcat.helpers.len(parent.percentages)) {
  119. parent.status.switch('pending');
  120. }
  121. }
  122. push(file) {
  123. if (!file.serverId || this.uploader.helper.searchUploadedFile(file.serverId) !== -1) {
  124. return;
  125. }
  126. this.uploadedFiles.push(file)
  127. }
  128. }