sc
/
smart-community_busniess


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>axupimgs</title>
    <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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: #fff;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #wrap {
            padding: 10px;
        }

        #topbar {
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            text-align: right;
        }

        #topbar button {
            margin: 0;
            margin-left: 5px;
            outline: none;
            padding: 4px 16px;
            box-sizing: border-box;
            display: inline-block;
            border: none;
            border-radius: 3px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            line-height: 1.5;
            background-color: #f0f0f0;
            color: #223;
        }

        #topbar button.primary {
            background-color: #3d97d4;
            color: #fff;
        }

        #topbar button:hover {
            background-color: #207ab7;
            color: #fff;
        }

        #topbar button.removeall {
            float: left
        }

        #file_list {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            padding-top: 10px;
        }

        #file_list:empty:after {
            content: '可以直接拖拽文件到这里';
            color: #777;
            font-size: 0.8em;
        }

        #file_list li {
            position: relative;
            display: block;
            vertical-align: top;
            padding: 5px 5px;
            border-radius: 5px;
        }

        #file_list li.up-over {}

        #file_list li.up-now {}

        #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: 5px;
            z-index: 999;
        }

        #file_list li:hover {
            background-color: #ddd;
        }

        #file_list li .picbox {
            display: flex;
            flex: 0 0 auto;
            justify-content: center;
            overflow: hidden;
            position: relative;
            width: 100%;
            padding-top: 100%;
            align-items: center;
        }

        #file_list li .picbox img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        #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: 2px;
            right: 2px;
            z-index: 9;
        }

        #file_list li .tools {
            display: none;
            position: absolute;
            bottom: 5px;
            right: 5px;
            z-index: 99;
        }

        #file_list li:hover .tools {
            display: block;
        }

        #file_list li .tools .remove {
            cursor: pointer;
        }

        #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');
        }

        #file_list li .namebox {
            font-size: 14px;
            line-height: 20px;
            max-height: 40px;
            overflow: hidden;
            padding: 5px 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        #file_list li .namebox span {
            word-break: break-all;
            vertical-align: top;
        }
    </style>

</head>

<body>
    <div id="wrap">
        <div id="topbar">
            <button class="addfile primary">+ 添加文件</button>
            <button class="upall primary">全部上传</button>
            <button class="removeall">清空列表</button>
        </div>
        <ul id="file_list"></ul>
    </div>

    <script>
        var editor = parent.tinymce.activeEditor;
        var axupimgs = parent.axupimgs;
        axupimgs.res = []; //存放本地文件的数组
        var blobInfo = { file: null }
        blobInfo.blob = function () {
            return this.file;
        }
        var upload_handler = axupimgs.images_upload_handler;
        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);
            //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 = 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 = '全部上传';
                return true;
            }
            if (axupimgs.res[n].url != '') {
                n++;
                upAllFiles(n)
            } else {
                blobInfo.file = axupimgs.res[n].file;
                var reader = new FileReader();
                reader.readAsDataURL(blobInfo.file);
                reader.onload = function (e) {
                    blobInfo.base64 = reader.result;
                    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;
                                }
                             // alert(upload_base_path);
                            }
                           //alert(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>