DedeBIZ
/
DedeV6


			
				
					
						
						
							
							<?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>
        <link rel="stylesheet" href="../../static/web/font/css/font-awesome.min.css">
        <link rel="stylesheet" href="../../static/web/css/bootstrap.min.css">
        <link rel="stylesheet" href="../../static/web/css/admin.css">
        <style>#wrap{padding:10px}#topbar{padding:10px 0;border-bottom:1px solid #ccc;text-align:right}#file_list{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding-top:10px}#file_list:empty:after{content:'拖拽图片到此处上传'}#file_list li{display:block;position:relative;padding:10px;vertical-align:top;border-radius:0.5rem}#file_list li:hover{background:#f5f5f5}#file_list li .picbox{display:flex;flex:0 0 auto;position:relative;padding-top:90%;width:100%;align-items:center;justify-content:center;overflow:hidden}#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:0.5rem}#file_list li .namebox{display:flex;padding:10px;justify-content:center;align-items:flex-start}#file_list li.up-over .picbox:after{position:absolute;bottom:10px;right:0;font-family:'FontAwesome';font-size:18px;color:#1eb867;content:'\f058';z-index:9}#file_list li .tools{display:none;position:absolute;bottom:12px;right:10px;z-index:99}#file_list li:hover .tools{display:block}#file_list li .tools .remove{cursor:pointer}#file_list li .tools .remove:after{font-family:'FontAwesome';font-size:18px;color:#dc3545;content:'\f1f8'}</style>
    </head>
    <body>
        <div id="wrap">
            <div id="topbar">
                <label class="mr-2"><input type="checkbox" name="isWater" id="isWater" <?php if ($photo_markup == '1') echo "checked";?>> 是否水印</label>
                <button class="btn btn-success btn-sm addfile">添加图片</button>
                <button class="btn btn-success btn-sm removeall">清空图片</button>
                <button class="btn btn-success btn-sm upall">全部上传</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);
                formData.append('format', "json");
                if (document.querySelector('#isWater').checked) {
                    formData.append('needwatermark', 1);
                } else {
                    //formData.append('needwatermark', 0);
                }
                let res = await fetch('select_images_post.php', {
                    method: 'POST',
                    body: formData
                });
                let data = await res.json();
                if (typeof data.msg !== 'undefined' && data.msg !== '') {
                    alert(data.msg)
                    return;
                }
                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 isFileImage(file) {
                return file && file['type'].split('/')[0] === 'image';
            }
            function addList(files) {
                var files_sum = files.length;
                var vDom = document.createDocumentFragment();
                for (let i=0;i<files_sum;i++) {
                    let file = files[i];
                    if (!isFileImage(file)) {
                        alert("选择非图片文件无法上传")
                        return;
                    }
                    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);
                //reSort();
            }
            //清空列表
            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='.png,.gif,.jpg,.jpeg'.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='全部上传';
                    //返回
                    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>