oa
/
oaup9


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>upimgs</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 o2upimgs=parent["o2upimgs_"+editor.id];
	o2upimgs.res = []; //存放本地文件的数组
	o2upimgs.iframeWindow = window;
	var blobInfo = {file:null}
	blobInfo.blob = function(){return this.file;}
	var upload_handler = o2upimgs.images_upload_handler;
	var upload_base_path = o2upimgs.images_upload_base_path;

	//为列表添加排序
	function reSort(){
		var lis = document.querySelectorAll('#file_list li');
		for(var i=0; i<lis.length; i++){
			lis[i].setAttribute('data-num',i);
		}
	}

    function addList(files){
        var files_sum = files.length;
        var vDom = document.createDocumentFragment();
        for(var i=0;i<files_sum;i++){
            var file = files[i];
            var blobUrl = window.URL.createObjectURL(file)
            o2upimgs.res.push({file:file,blobUrl:blobUrl,url:''});
            var 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', function () {
		o2upimgs.res=[];
		var lis = document.querySelectorAll('#file_list li');
		for(var i=0; i<lis.length; i++){
			lis[i].parentNode.removeChild(lis[i]);
		}
	});
    //拖拽添加
    document.addEventListener('dragover', function(e){
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });
    document.addEventListener('drop', function(e){
        e.stopPropagation();
        e.preventDefault();
        if(!e.dataTransfer.files){return false;}
        var dropfiles = e.dataTransfer.files;
        if(!(dropfiles.length>0)){return false;}
        var exts=o2upimgs.o2upimgs_filetype.replace(/(\s)+/g,'').toLowerCase().split(',');
        var files=[];
        for( var i=0; i < dropfiles.length; i++ ){
        	var file = dropfiles[i];
            ext = file.name.split('.');
            ext = '.'+ext[ext.length-1];
            for(var j=0; j<exts.length; j++){
                if(exts[j]===ext){
                    files.push(file);
                    break;
                }
            }
        }
        if(files.length>0){ addList(files) }
    });

    //添加文件
    document.querySelector('#topbar .addfile').addEventListener('click',function(){
    	debugger;
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('multiple', 'multiple');
        input.setAttribute('accept', o2upimgs.o2upimgs_filetype);
		input.addEventListener('change', function() {
			var files = this.files;
			addList(files);
		})
        input.click();
    });

	var file_i = 0;

	function upAllFiles(n, callback){
		var len = o2upimgs.res.length;
		file_i = n;
		if(len == n){
			file_i=0;
            document.querySelector('#topbar .upall').innerText='全部上传';
            if(callback)callback();
			return true;
		}
		if( o2upimgs.res[n].url!='' ){
			n++;
			upAllFiles(n, callback)
		}else{
			var img = document.querySelectorAll('#file_list li')[file_i].querySelector("img");
			blobInfo.file=o2upimgs.res[n].file;
			upload_handler(blobInfo, function(url, attributes){
				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;
					}
				}
				o2upimgs.res[file_i].url = url;
				o2upimgs.res[file_i].attributes = attributes;
				// 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, callback);
			},function(err){
                document.querySelector('#topbar .upall').innerText='全部上传';
                var lis = document.querySelectorAll('#file_list li.up-now');
                for(var i=0; i<lis.length; i++){
                	lis[i].setAttribute('class','up-no');
				}
                alert(err);
            }, img);
		}
		
	}

	function uploadAll(callback){
		var button = document.querySelector('#topbar .upall');
		if(button.innerText!='全部上传'){return false;}
		if(o2upimgs.res.length>0){
			var lis = document.querySelectorAll('#file_list li.up-no');
			for(var i=0; i<lis.length; i++) {
				var el = lis[i];
				el.classList ? el.classList.add('up-now') : el.className += ' up-now';
			}
			button.innerText='上传中...';
			upAllFiles(0, callback);
		}
	}

	function querySave( callback ){
		if(o2upimgs.res.length>0){
			var lis = document.querySelectorAll('#file_list li.up-now');
			if(lis.length > 0){
				editor.windowManager.alert('正在上传，请稍等...');
				return false;
			}
			lis = document.querySelectorAll('#file_list li.up-no');
			if(lis.length > 0){
				editor.windowManager.confirm("还有图片没有上传，是否继续？", function(flag) {
					if (flag){
						if(callback)callback()
						// uploadAll(callback)
					}else{
						return;
					}
				});
			}else{
				if(callback)callback()
			}
		}
	}

    document.querySelector('#topbar .upall').addEventListener('click', function(e){
		uploadAll();
        // if(e.target.innerText!='全部上传'){return false;}
        // if(o2upimgs.res.length>0){
		// 	var lis = document.querySelectorAll('#file_list li.up-no');
		// 	for(var i=0; i<lis.length; i++) {
		// 		var el = lis[i];
		// 		el.classList ? el.classList.add('up-now') : el.className += ' up-now';
		// 	}
        //     e.target.innerText='上传中...';
        //     upAllFiles(0);
        // }
    });

    var observ_flist = new MutationObserver( function(muList,observe){
        if(muList[0].addedNodes.length>0){
			for( var i=0; i< muList[0].addedNodes.length; i++){
				var el = muList[0].addedNodes[i];
                el.querySelector('.remove').addEventListener('click', function(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);
                    o2upimgs.res.splice(n,1);
                });
            }
        }
        reSort();
    });
    observ_flist.observe(document.querySelector('#file_list'),{childList:true});

</script>
</body>
</html>