ssi-uploader.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <link href="css/bootstrap.min.css" rel="stylesheet" />
  8. <link href="css/ssi-upload.css" rel="stylesheet" />
  9. <script src="../../js/boot.js"></script>
  10. <script src="js/releasejq.js"></script>
  11. <script src="js/ssi-upload.js"></script>
  12. <style type="text/css">
  13. body {
  14. margin: 0px;
  15. padding: 0px;
  16. }
  17. .ssi-buttonWrapper {
  18. margin-left: 30px;
  19. }
  20. .ssi-previewBox {
  21. margin-left: 15px;
  22. padding: 5px 10px;
  23. }
  24. .zzsc-container {
  25. margin: 0 auto;
  26. }
  27. .ssi-imgToUploadTable {
  28. font-size: 12px;
  29. width: 108px;
  30. height: 148px;
  31. }
  32. .ssi-imgToUploadTable tr:first-child td:first-child {
  33. height: auto;
  34. }
  35. .ssi-imgToUpload {
  36. width: 95px;
  37. height: 83px;
  38. }
  39. .ssi-dropZonePreview {
  40. min-height: 195px;
  41. border: 1px dashed #ccc;
  42. }
  43. #ssi-DropZoneBack {
  44. color: #888;
  45. font-size: 12px;
  46. padding: 0px;
  47. padding-bottom: 5px;
  48. }
  49. span.trash10 {
  50. width: 6px;
  51. height: 6px;
  52. background-size: cover;
  53. background-position: 0px;
  54. }
  55. .ssi-imgToUploads {
  56. width: 95px;
  57. height: 83px;
  58. }
  59. </style>
  60. <script type="text/javascript">
  61. var il = getCookie("islocal");
  62. var upUrl = "";
  63. if (il != null && il == "1") {
  64. upUrl = "http://localhost:913/mulUploadImg.aspx?ut=xddj&";
  65. } else {
  66. upUrl = "http://183.250.143.56:8088/mulUploadImg.aspx?ut=xddj&";
  67. }
  68. var upCount = 0;
  69. var sup = null;
  70. var upArr = new Array();
  71. let base_url = "";
  72. $(document).ready(function () {
  73. sup = $('#ssi-upload3');
  74. sup.ssi_uploader({
  75. url: upUrl, maxNumberOfFiles: 6, maxFileSize: 80, allowed: ['jpg', 'bmp', 'gif', 'jpeg', 'png', 'mp4'],
  76. onEachUpload: function (fileInfo) {
  77. if (fileInfo == undefined || fileInfo == null) { alert("上传发生错误!"); }
  78. if (fileInfo.result.res == "1") {
  79. upArr.push(fileInfo.result.fn);
  80. }
  81. },
  82. onUpload: function (obj) {
  83. upCount = obj.successfulUpload;
  84. callView();
  85. },
  86. beforeEachUpload: false
  87. });
  88. let images = window.parent.$("#upframe").data("images");
  89. base_url = window.parent.$("#upframe").data("viewUrl");
  90. if (images) {
  91. upArr = images.split(",");
  92. callView();
  93. }
  94. });
  95. function getUpImg() {
  96. if (upArr.length > 0) {
  97. return upArr;
  98. }
  99. return null;
  100. }
  101. function callView() {
  102. if (upArr.length == 0) return;
  103. let html = `<div id="ssi-DropZoneBack">选择图片时按住ctrl键可以多选;也可以拖动图片到当前位置,选中后要点击"上传"(最多上传6张,单张不超过50MB)</div>`;
  104. for (let i = 0; i < upArr.length; i++) {
  105. let url = base_url + "/" + upArr[i];
  106. if (upArr[i].indexOf(".mp4") > -1) {
  107. html += `<table class="ssi-imgToUploadTable ssi-completed"><tbody><tr><td class="ssi-upImgTd"><video class="ssi-imgToUploads" src="${url}" onclick=\"largeImage(this)\"/></td></tr><tr><td><div class="ssi-uploadProgress" style="width: 100%;"></div></td></tr><tr><td><span class="ssi-statusLabel success" data-status="上传成功!">成功</span><button class="ssi-button error success-removeBtn" onclick="deleteImage(this,'${i}')"><span class="trash10 trash"></span></button></td></tr><tr><td>${getImageName(url)}</td></tr></tbody></table>`;
  108. } else {
  109. html += `<table class="ssi-imgToUploadTable ssi-completed"><tbody><tr><td class="ssi-upImgTd"><img class="ssi-imgToUploads" src="${url}" onclick=\"largeImage(this)\"></td></tr><tr><td><div class="ssi-uploadProgress" style="width: 100%;"></div></td></tr><tr><td><span class="ssi-statusLabel success" data-status="上传成功!">成功</span><button class="ssi-button error success-removeBtn" onclick="deleteImage(this,'${i}')"><span class="trash10 trash"></span></button></td></tr><tr><td>${getImageName(url)}</td></tr></tbody></table>`;
  110. }
  111. }
  112. $("#ssi-previewBox").empty().append(html);
  113. }
  114. function deleteImage(that, index) {
  115. $(that).parents(".ssi-imgToUploadTable").remove()
  116. upArr.splice(index, 1);
  117. }
  118. function getImageName(url) {
  119. if (!url) return "";
  120. let char_list = url.split("/");
  121. return char_list[char_list.length - 1];
  122. }
  123. function largeImage(that) {
  124. let url = $(that).attr("src");
  125. let large_image = "";
  126. if (url.indexOf(".mp4") > -1) {
  127. large_image = '<video controls src= ' + url + '></video>';
  128. } else {
  129. large_image = '<img src= ' + url + '></img>';
  130. }
  131. window.parent.$('.image_large').html($(large_image).css({
  132. display: "block",
  133. height: '60%',
  134. //width: '40%',
  135. position: "absolute",
  136. left: "50%",
  137. top: "50%",
  138. transform: "translate(-50%,-50%)",
  139. }, 500));
  140. window.parent.$('.image_large').css("display", "block");
  141. }
  142. </script>
  143. </head>
  144. <body>
  145. <div class="zzsc-container">
  146. <div class="container">
  147. <div class="row">
  148. <div class="col-md-12">
  149. <input type="file" multiple id="ssi-upload3" />
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </body>
  155. </html>