|
- <?php
- require_once(dirname(__FILE__)."/config.php");
- include(DEDEDATA.'/mark/inc_photowatermark_config.php');
- ?>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <title>插入多图</title>
- <style>
- body{margin:0;line-height:1.5;font:12px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;color:
- ul{margin:0;padding:0;list-style:none}
- button+button{margin-left:10px}
-
-
-
- .topbar button+.topbar button{margin-left:10px}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- </style>
- </head>
- <body>
- <div id="wrap">
- <div id="topbar">
- <label><input type="checkbox" name="isWater" id="isWater" <?php if ($photo_markup == '1') echo "checked"; ?>> 是否水印 </label>
- <button class="addfile">添加文件</button>
- <button class="upall">全部上传</button>
- <button class="removeall">清空列表</button>
- </div>
- <ul id="file_list"></ul>
- </div>
- <script>
- var axupimgs={};
- axupimgs.res = [];
- var blobInfo = {file:null}
- blobInfo.blob = function(){return this.file;}
- var upload_handler = async(blobInfo, succFun, failFun)=>{
- var file = blobInfo.blob();
- formData = new FormData();
- formData.append('upload', file, file.name);
- if (document.querySelector('#isWater').checked) {
- formData.append('needwatermark', 1);
- } else {
-
- }
- let res = await fetch('select_images_post.php', {
- method: 'POST',
- body: formData
- });
- let data = await res.json();
- succFun(data.url);
- };
- var upload_base_path = axupimgs.images_upload_base_path;
-
- function reSort(){
- document.querySelectorAll('#file_list li').forEach((el,i)=>{
- el.setAttribute('data-num',i);
- });
- }
- function addList(files){
- var files_sum = files.length;
- var vDom = document.createDocumentFragment();
- for(let i=0;i<files_sum;i++){
- let file = files[i];
- let blobUrl = window.URL.createObjectURL(file)
- axupimgs.res.push({file:file,blobUrl:blobUrl,url:''});
- let li = document.createElement('li');
- li.setAttribute('class','up-no');
- li.setAttribute('data-time',file.lastModified);
- 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>';
- vDom.appendChild(li);
- }
- document.querySelector('#file_list').appendChild(vDom);
-
- }
-
- document.querySelector('#topbar .removeall').addEventListener('click',()=>{
- axupimgs.res=[]
- document.querySelectorAll('#file_list li').forEach((el,i)=>{
- el.parentNode.removeChild(el)
- });
- });
-
- document.addEventListener('dragover', (e)=>{
- e.stopPropagation();
- e.preventDefault();
- e.dataTransfer.dropEffect = 'copy';
- });
- document.addEventListener('drop', (e)=>{
- e.stopPropagation();
- e.preventDefault();
- if(!e.dataTransfer.files){return false;}
- var dropfiles = e.dataTransfer.files;
- if(!(dropfiles.length>0)){return false;}
- var exts=axupimgs.axupimgs_filetype.replace(/(\s)+/g,'').toLowerCase().split(',');
- var files=[];
- for( let file of dropfiles ){
- ext = file.name.split('.');
- ext = '.'+ext[ext.length-1];
- for(let s of exts){
- if(s==ext){
- files.push(file);
- break;
- }
- }
- }
- if(files.length>0){ addList(files) }
- });
-
- document.querySelector('#topbar .addfile').addEventListener('click',()=>{
- var input = document.createElement('input');
- input.setAttribute('type', 'file');
- input.setAttribute('multiple', 'multiple');
- input.setAttribute('accept', axupimgs.axupimgs_filetype);
- input.click();
- input.onchange = function() {
- var files = this.files;
- addList(files);
- }
- });
- var file_i = 0;
- function upAllFiles(n){
- var len = axupimgs.res.length;
- file_i = n;
- if(len == n){
- file_i=0;
- document.querySelector('#topbar .upall').innerText='全部上传';
-
- console.log(axupimgs.res);
- axupimgs.res.forEach((v,k)=>{
-
- let addonHTML = `<img src='${v.url}'/>`;
- window.opener.CKEDITOR.instances["<?php echo $f ?>"].insertHtml(addonHTML);
- })
- window.close();
- return true;
- }
- if( axupimgs.res[n].url!='' ){
- n++;
- upAllFiles(n)
- } else {
- blobInfo.file=axupimgs.res[n].file;
- blobInfo.isWater = document.querySelector('#isWater').checked;
- upload_handler(blobInfo,function(url){
- if(upload_base_path){
- if(upload_base_path.slice(-1)=='/' && url.substr(0,1)=='/' ){
- url = upload_base_path + url.slice(1);
- }else if(upload_base_path.slice(-1)!='/' && url.substr(0,1)!='/' ){
- url = upload_base_path + '/' + url;
- } else {
- url = upload_base_path + url;
- }
- }
- axupimgs.res[file_i].url = url;
- filename = url.split('/').pop();
- var li = document.querySelectorAll('#file_list li')[file_i];
- li.setAttribute('class','up-over');
- li.querySelector('.namebox span').innerText = filename;
- n++
- upAllFiles(n);
- },function(err){
- document.querySelector('#topbar .upall').innerText='全部上传';
- document.querySelectorAll('#file_list li.up-now').forEach((el,i)=>{
- el.setAttribute('class','up-no');
- });
- alert(err);
- });
- }
- }
- document.querySelector('#topbar .upall').addEventListener('click',(e)=>{
- if(e.target.innerText!='全部上传'){return false;}
- if(axupimgs.res.length>0){
- document.querySelectorAll('#file_list li.up-no').forEach((el,i)=>{
- el.classList ? el.classList.add('up-now') : el.className+=' up-now';
- });
- e.target.innerText='上传中';
- upAllFiles(0);
- }
- });
- var observ_flist = new MutationObserver( (muList,observe)=>{
- if(muList[0].addedNodes.length>0){
- muList[0].addedNodes.forEach((el)=>{
- el.querySelector('.remove').addEventListener('click',(e)=>{
- var li = e.target.parentNode.parentNode;
- var n = li.getAttribute('data-num');
- var el = document.querySelectorAll('#file_list li')[n];
- el.parentNode.removeChild(el);
- axupimgs.res.splice(n,1);
- });
- });
- }
- reSort();
- });
- observ_flist.observe(document.querySelector('#file_list'),{childList:true});
- </script>
- </body>
- </html>
|
