<!doctype html>  
<html>
<head> 
<meta charset="utf-8">
<title>多张图片批量</title>
<script src="<?= RESOURCES ?>/js/jquery.js"></script>

<link rel="stylesheet" type="text/css" href="<?= RESOURCES ?>/css/webuploader.css">
<link rel="stylesheet" type="text/css" href="<?= RESOURCES ?>/css/diyUpload.css">
<script type="text/javascript" src="<?= RESOURCES ?>/js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="<?= RESOURCES ?>/js/diyUpload.js"></script>
</head>
<style>
*{ margin:0; padding:0;}
body{ height:50px}
#box{  width:100%; min-height:50px; background:#F5F5F5}
.webuploader-pick{ background: rgb(0, 149, 136); } 
</style>
<body>
<div id="box">
	<div id="test"   >
	
	</div>
	
	<div class="parentFileBox_ghy" id="ghy" > </div>
</div>


</body>
<script type="text/javascript">
String.prototype.replaceAll = function(s1,s2){
	　　return this.replace(new RegExp(s1,"gm"),s2);
	　　}
	
loadZutu();
//显示现有数据
function loadZutu()
{
	//获取父框架的元素的默认值
	var _ghyOb=$('#<?php echo $_GET["field"]?>', window.parent.document);
	
	//_ghyOb.val(_ghyOb.val().replaceAll("<?= RESOURCES ?>images/nopic.jpg{title}{next}","") );
	if(_ghyOb.val().trim()!="")
	{
		
		var zutuStr=_ghyOb.val().replaceAll("{next}","|");
		var zutuArr=zutuStr.split('|');
		//console.log(zutuArr.length          +"\n");
		var tempHtml='<ul class="fileBoxUl">';
		for(var i = 0;i<zutuArr.length;i++){
			//zutuArr[i]
			if(zutuArr[i].trim()=="")
			{
				continue;
			}
			var zutuStr1=zutuArr[i].replaceAll("{title}",",");
			var zutuArr1=zutuStr1.split(',');
			var imgPath=zutuArr1[0];
			//console.log(imgPath              +"\n");
			//添加子容器;    
			if(i==zutuArr.length-1)
			{
					var temp_zutuArr=zutuArr[i];	
			}else
			{
				    var temp_zutuArr=zutuArr[i]+"{next}";	
			}
			tempHtml+= '<li id="fileBox'+i+'" class="diyUploadHover"> '+
					'<div class="viewThumb">'+
					'<a href="'+imgPath+'" target="_blank" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">' +
					'<img style=" max-height: 100px" src="'+imgPath+'" class="tihuan">' +
					'</a>'+
					'</div>  '+
					'<div class="diyCancel"  onclick="del_zutu(\''+temp_zutuArr+'\',$(\'this\'));"></div>  '+
					'<div class="diySuccess"></div>  '+
					'<div class="diyFileName">'+imgPath+'</div> '+

					'</li>';
		}
		tempHtml+='</ul>';
		//console.log(tempHtml          +"\n");
		$("#ghy").append(tempHtml)
		
	}else
	{
		_ghyOb.val(" ");
	}
}

//删除组图的一张图片
function del_zutu(path,dom)
{
	dom.parent().hide();
	//获取父框架的元素的默认值
	var _ghyOb=$('#<?php echo $_GET["field"]?>', window.parent.document);
	
	_ghyOb.val(_ghyOb.val().replaceAll(path,"") );
	console.log(_ghyOb.val().replaceAll(path,""));
	//清除现有
	$("#ghy").html("");
	loadZutu();
}

/*
* 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
* 其他参数同WebUploader
*/

$('#test').diyUpload({
	url:'/<?= ADMIN_NAME ?>/inc/fileupload',
	success:function( data ) {
		console.info( data._raw );
		//获取上传图片路径
		var imgPath=data._raw;
		//imgPath+="{title}"+"图片简介测试内容";
		imgPath+="{title}"+"";
		//修改父框架的元素
		var _ghyOb=$('#<?php echo $_GET["field"]?>', window.parent.document);
		if(_ghyOb.val()==""||_ghyOb.val()==" ")
			{
				_ghyOb.val(imgPath);
			}else
			{
				_ghyOb.val(imgPath+ "{next}"+ _ghyOb.val());	
			}
		//$('#zutu', window.parent.document).val($('#zutu', window.parent.document).val()+","+imgPath);
		
	},
	error:function( err ) {
		console.info( err );	
	}
});

$('#as').diyUpload({
	url:'/<?= ADMIN_NAME ?>/inc/fileupload',
	success:function( data ) {
		console.info( data );
	},
	error:function( err ) {
		console.info( err );	
	},
	buttonText : '选择文件',
	chunked:true,
	// 分片大小
	chunkSize:512 * 102400,
	//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
	fileNumLimit:5000,
	fileSizeLimit:500000 * 102400,
	fileSingleSizeLimit:50000 * 102400,
	accept: {}
});
</script>
<script type="text/javascript">
	//组图替换位置
	function allowDrop(ev)
	{
		ev.preventDefault();
	}

	var srcdiv = null;
	function drag(ev,divdom)
	{
		srcdiv=divdom;
		ev.dataTransfer.setData("text/html",divdom.innerHTML);
	}

	//拖拽完成后
	function drop(ev,divdom)
	{
		ev.preventDefault();
		if(srcdiv != divdom){
			srcdiv.innerHTML = divdom.innerHTML;
			divdom.innerHTML=ev.dataTransfer.getData("text/html");
		}
		//循环获取组图内容
		var arr=[];
		for(var i=0;i<$('.tihuan').length;i++){
			arr[i]=$('.tihuan').eq(i).attr('src');
			$('.tihuan').eq(i).parent().attr('href',$('.tihuan').eq(i).attr('src'));
		}
		var data={};
		//获取url
		var _ghyOb=$('#<?php echo $_GET["field"]?>', window.parent.document);
		var url=_ghyOb.context.URL;
		var url_c=url.split('?');
		var can=url_c[1];
		var table=can.split('&');
		var table_id=table[0].split('=');
		table_id=table_id[1];
		var id=table[1].split('=');
		id=id[1];
		//组图字段名
		var zi=GetRequest();
		// ajax打印组图顺序  替换组图内容
		$.ajax({
			url: '/<?= ADMIN_NAME ?>/autotable/drop',
			type: 'post',
			dataType: 'json',
			data:{'data':arr,'table_id':table_id,'id':id,'zi':zi},
			beforeSubmit: function () {},
			success: function (data) {

			},
			// clearForm: true,//禁止清楚表单
			// resetForm: true //禁止重置表单
		});
	}
	function GetRequest() {
		var url = location.search; //获取url中"?"符后的字串
		var theRequest = new Object();
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			for(var i = 0; i < strs.length; i ++) {
				theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
			}
		}
		return theRequest;
	}
</script>
</html>
