国内流行的内容管理系统(CMS)多端全媒体解决方案 https://www.dedebiz.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

226 lines
11KB

  1. <?php
  2. require_once(dirname(__FILE__)."/config.php");
  3. include(DEDEDATA.'/mark/inc_photowatermark_config.php');
  4. ?>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="utf-8">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10. <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">
  11. <meta name="apple-mobile-web-app-capable" content="yes">
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13. <meta name="format-detection" content="telephone=no">
  14. <title>插入多图</title>
  15. <style>
  16. body{margin:0;line-height:1.6;font:12px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;color:#545b62;background:#fff}
  17. ul{margin:0;padding:0;list-style:none}
  18. input[type=radio],input[type=checkbox]{margin:0;height:auto;box-shadow:none;outline:none;vertical-align:text-top}
  19. button+button{margin-left:10px}
  20. #wrap{padding:10px}
  21. #topbar{padding:10px 0;border-bottom:1px solid #ccc;text-align:right}
  22. #topbar button{display:inline-block;border:0;padding:.25rem .5rem;line-height:1.6;font-size:12px;color:#fff;background:#1eb867;border-color:#1eb867;border-radius:.25rem;transition:all .6s;text-align:center}
  23. .topbar button+.topbar button{margin-left:10px}
  24. #topbar button:focus{background:#006829;border-color:#005b24;box-shadow:0 0 0 0.2rem rgba(38,159,86,.5);outline:none}
  25. #file_list{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding-top:10px}
  26. #file_list:empty:after{content:'拖拽图片放到这里进行上传'}
  27. #file_list li{position:relative;display:block;vertical-align:top;padding:10px;border-radius:.25rem}
  28. #file_list li.up-now:after{content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(255,255,255,0.8) url(loading.gif) center center no-repeat;border-radius:.25rem;z-index:999}
  29. #file_list li:hover{background:#f5f5f5}
  30. #file_list li .picbox{display:flex;flex:0 0 auto;justify-content:center;overflow:hidden;position:relative;width:100%;padding-top:90%;align-items:center}
  31. #file_list li .picbox img{display:block;max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);border-radius:.25rem}
  32. #file_list li .namebox{padding:10px;display:flex;justify-content:center;align-items:flex-start}
  33. #file_list li.up-over .picbox:after{content:url(data:image/svg+xml;%20charset=utf8,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M512%200C229.376%200%200%20229.376%200%20512s229.376%20512%20512%20512%20512-229.376%20512-512S794.624%200%20512%200z%22%20fill%3D%22%234AC711%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M855.552%20394.752l-358.4%20358.4a50.9952%2050.9952%200%200%201-72.192%200l-204.8-204.8c-18.944-19.968-18.944-51.2%200-71.168a50.5344%2050.5344%200%200%201%2072.192-1.024L460.8%20644.608l322.048-322.048c19.968-18.944%2051.2-18.944%2071.168%200%2020.48%2019.456%2020.992%2051.712%201.536%2072.192z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);position:absolute;bottom:10px;right:0;z-index:9}
  34. #file_list li .tools{display:none;position:absolute;bottom:12px;right:10px;z-index:99}
  35. #file_list li:hover .tools{display:block}
  36. #file_list li .tools .remove{cursor:pointer}
  37. #file_list li .tools .remove:after{content:url(data:image/svg+xml;%20charset=utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17%206h3a1%201%200%200%201%200%202h-1v11a3%203%200%200%201-3%203H8a3%203%200%200%201-3-3V8H4a1%201%200%201%201%200-2h3V5a3%203%200%200%201%203-3h4a3%203%200%200%201%203%203v1zm-2%200V5a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v1h6zm2%202H7v11a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V8zm-8%203a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6zm4%200a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6z%22%3E%3C/path%3E%3C/svg%3E)}
  38. </style>
  39. </head>
  40. <body>
  41. <div id="wrap">
  42. <div id="topbar">
  43. <label><input type="checkbox" name="isWater" id="isWater" <?php if ($photo_markup == '1') echo "checked";?>> 是否水印</label>
  44. <button class="addfile">添加图片</button>
  45. <button class="removeall">清空图片</button>
  46. <button class="upall">全部上传</button>
  47. </div>
  48. <ul id="file_list"></ul>
  49. </div>
  50. <script>
  51. var axupimgs={};
  52. axupimgs.res = [];//存放本地文件的数组
  53. var blobInfo = {file:null}
  54. blobInfo.blob = function(){return this.file;}
  55. var upload_handler = async(blobInfo, succFun, failFun)=>{
  56. var file = blobInfo.blob();
  57. formData = new FormData();
  58. formData.append('upload', file, file.name);
  59. formData.append('format', "json");
  60. if (document.querySelector('#isWater').checked) {
  61. formData.append('needwatermark', 1);
  62. } else {
  63. //formData.append('needwatermark', 0);
  64. }
  65. let res = await fetch('select_images_post.php', {
  66. method: 'POST',
  67. body: formData
  68. });
  69. let data = await res.json();
  70. if (typeof data.msg !== 'undefined' && data.msg !== '') {
  71. alert(data.msg)
  72. return;
  73. }
  74. succFun(data.url);
  75. };
  76. var upload_base_path = axupimgs.images_upload_base_path;
  77. //为列表添加排序
  78. function reSort(){
  79. document.querySelectorAll('#file_list li').forEach((el,i)=>{
  80. el.setAttribute('data-num',i);
  81. });
  82. }
  83. function isFileImage(file) {
  84. return file && file['type'].split('/')[0] === 'image';
  85. }
  86. function addList(files){
  87. var files_sum = files.length;
  88. var vDom = document.createDocumentFragment();
  89. for (let i=0;i<files_sum;i++) {
  90. let file = files[i];
  91. if (!isFileImage(file)) {
  92. alert("选择非图片文件无法上传")
  93. return;
  94. }
  95. let blobUrl = window.URL.createObjectURL(file)
  96. axupimgs.res.push({file:file,blobUrl:blobUrl,url:''});
  97. let li = document.createElement('li');
  98. li.setAttribute('class','up-no');
  99. li.setAttribute('data-time',file.lastModified);
  100. li.innerHTML='<div class="picbox"><img src="'+blobUrl+'"></div><div class="namebox"><span>'+file.name+'</span></div><div class="tools"><a class="remove"></a></div>';
  101. vDom.appendChild(li);
  102. }
  103. document.querySelector('#file_list').appendChild(vDom);
  104. //reSort();
  105. }
  106. //清空列表
  107. document.querySelector('#topbar .removeall').addEventListener('click',()=>{
  108. axupimgs.res=[]
  109. document.querySelectorAll('#file_list li').forEach((el,i)=>{
  110. el.parentNode.removeChild(el)
  111. });
  112. });
  113. //拖拽添加
  114. document.addEventListener('dragover', (e)=>{
  115. e.stopPropagation();
  116. e.preventDefault();
  117. e.dataTransfer.dropEffect = 'copy';
  118. });
  119. document.addEventListener('drop', (e)=>{
  120. e.stopPropagation();
  121. e.preventDefault();
  122. if (!e.dataTransfer.files){return false;}
  123. var dropfiles = e.dataTransfer.files;
  124. if (!(dropfiles.length>0)){return false;}
  125. var exts='.png,.gif,.jpg,.jpeg'.replace(/(\s)+/g,'').toLowerCase().split(',');
  126. var files=[];
  127. for ( let file of dropfiles ) {
  128. ext = file.name.split('.');
  129. ext = '.'+ext[ext.length-1];
  130. for (let s of exts) {
  131. if (s==ext){
  132. files.push(file);
  133. break;
  134. }
  135. }
  136. }
  137. if (files.length>0){ addList(files) }
  138. });
  139. //添加文件
  140. document.querySelector('#topbar .addfile').addEventListener('click',()=>{
  141. var input = document.createElement('input');
  142. input.setAttribute('type', 'file');
  143. input.setAttribute('multiple', 'multiple');
  144. input.setAttribute('accept', axupimgs.axupimgs_filetype);
  145. input.click();
  146. input.onchange = function() {
  147. var files = this.files;
  148. addList(files);
  149. }
  150. });
  151. var file_i = 0;
  152. function upAllFiles(n){
  153. var len = axupimgs.res.length;
  154. file_i = n;
  155. if (len == n){
  156. file_i=0;
  157. document.querySelector('#topbar .upall').innerText='全部上传';
  158. //返回
  159. console.log(axupimgs.res);
  160. axupimgs.res.forEach((v,k)=>{
  161. let addonHTML = `<img src='${v.url}'/>`;
  162. window.opener.CKEDITOR.instances["<?php echo $f ?>"].insertHtml(addonHTML);
  163. })
  164. window.close();
  165. return true;
  166. }
  167. if ( axupimgs.res[n].url!='' ){
  168. n++;
  169. upAllFiles(n)
  170. } else {
  171. blobInfo.file=axupimgs.res[n].file;
  172. blobInfo.isWater = document.querySelector('#isWater').checked;
  173. upload_handler(blobInfo,function(url){
  174. if (upload_base_path){
  175. if (upload_base_path.slice(-1)=='/' && url.substr(0,1)=='/' ){
  176. url = upload_base_path + url.slice(1);
  177. }else if (upload_base_path.slice(-1)!='/' && url.substr(0,1)!='/' ){
  178. url = upload_base_path + '/' + url;
  179. } else {
  180. url = upload_base_path + url;
  181. }
  182. }
  183. axupimgs.res[file_i].url = url;
  184. filename = url.split('/').pop();
  185. var li = document.querySelectorAll('#file_list li')[file_i];
  186. li.setAttribute('class','up-over');
  187. li.querySelector('.namebox span').innerText = filename;
  188. n++
  189. upAllFiles(n);
  190. },function(err){
  191. document.querySelector('#topbar .upall').innerText='全部上传';
  192. document.querySelectorAll('#file_list li.up-now').forEach((el,i)=>{
  193. el.setAttribute('class','up-no');
  194. });
  195. alert(err);
  196. });
  197. }
  198. }
  199. document.querySelector('#topbar .upall').addEventListener('click',(e)=>{
  200. if (e.target.innerText!='全部上传'){return false;}
  201. if (axupimgs.res.length>0){
  202. document.querySelectorAll('#file_list li.up-no').forEach((el,i)=>{
  203. el.classList ? el.classList.add('up-now') : el.className+=' up-now';
  204. });
  205. e.target.innerText='上传中';
  206. upAllFiles(0);
  207. }
  208. });
  209. var observ_flist = new MutationObserver( (muList,observe)=>{
  210. if (muList[0].addedNodes.length>0){
  211. muList[0].addedNodes.forEach((el)=>{
  212. el.querySelector('.remove').addEventListener('click',(e)=>{
  213. var li = e.target.parentNode.parentNode;
  214. var n = li.getAttribute('data-num');
  215. var el = document.querySelectorAll('#file_list li')[n];
  216. el.parentNode.removeChild(el);
  217. axupimgs.res.splice(n,1);
  218. });
  219. });
  220. }
  221. reSort();
  222. });
  223. observ_flist.observe(document.querySelector('#file_list'),{childList:true});
  224. </script>
  225. </body>
  226. </html>