<!doctype html>
<html lang="zh_CN">
<head>
<!--
<?php
print <<<EOT
--> 
<meta charset="gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black"  />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>LocalResizeIMG</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px 'Microsoft Yahei','Simsun';color:#333;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;color:#2d374b;}
a:hover {color:#d00;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
img {vertical-align:middle;}
.UpImgBox{
	max-width:600px;
	margin:10px auto;
}
.UpImgBox .select{
	text-align:center;
	padding:10px 0;
}
.UpImgBox .select input{
	border:#CCC solid 1px;
	padding:3px;
	border-radius:5px;
}
.isrotate{
	width:90%;
	height:32px;
	line-height:32px;
	margin:auto;
	font-size:16px;
	position:relative;
}
.isrotate span{
	display:block;
	position:absolute;
	width:60px;
	height:30px;
	border:#DDD solid 1px;
	right:0;
	top:0;
	border-radius:15px;
}
.isrotate span.yes{
	background:green;
	border:green solid 1px;
}
.isrotate span em{
	display:block;
	position:absolute;
	width:28px;
	height:28px;
	left:0;
	top:0;
	border:#CCC solid 1px;
	background:#FFF;
	border-radius:14px;
}
.UpImgBox .subimt{
	text-align:center;
	padding:10px 0;
}
.UpImgBox .subimt span{
	display:inline-block;
	position:relative;
	border:#F30 solid 1px;
	padding:5px 10px;
	background:#F60;
	color:#FFF;
	border-radius:5px;
}
.UpImgBox .subimt span input{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	cursor:pointer;
	filter:alpha(opacity=0); 
	-moz-opacity:0; 
	opacity:0;
}
.UpImgBox .subimt em{
	display:inline-block;
	border:#999 solid 1px;
	padding:5px 10px;
	background:#CCC;
	color:#FFF;
	margin-left:10px;
	border-radius:5px;
}
.ListImg:after{
	content:'';
	display:block;
	width:100%;
	height:1px;
	clear:both;
}
.ListImg li{
	width:50%;
	position:relative;
	float:left;
}
.ListImg li:before{
	content:'';
	display:block;
	padding-top:100%;
}
.ListImg li span{
	display:block;
	position:absolute;
	width:90%;
	height:90%;
	left:5%;
	top:5%;
	overflow:hidden;
	border:#CCC solid 1px;
	border-radius:5px;
}
.ListImg li span img{
	max-width:100%;
	max-height:100%;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  -webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
  
}
.ListImg li em{
	display:block;
	position:absolute;
	width:20%;
	height:20%;
	background:url(del.png) no-repeat;
	background-size:100% 100%;
	right:5%;
	top:5%;
}
</style>
<body>
<div class="UpImgBox">
<form method="post" action="?action=copyimg&updir=$updir" onSubmit="return checkInput()">
	<div class="select"><input type="file" onChange="showFileName(this);" multiple /></div>
	<div class="isrotate">
		图片角度修正<span><em></em></span>
	</div>
	<ul class="ListImg">
	</ul>
	<div class="subimt"><span>确定上传图片<input type="submit" value="上传图片"/></span> <em onClick="window.parent.HideUpImgBox()">关闭</em></div>
</form>
</div>
<!-- javascript================================================== -->
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="selectimg.js"></script>
<script type="text/javascript" src="exif.js"></script>
<script type="text/javascript">
var IsRotateImg='no';//默认不修改图片角度
$('.isrotate span').click(function(){	
	if($(this).hasClass("yes")){
		alert('当前设置只对新选择的图片有效，不影响已选择的图片。');
  		$(this).removeClass('yes');
		IsRotateImg='no';
		$(this).find('em').animate({'left':'0'},300);
  	}else{
		alert('当前设置只对新选择的图片有效，不影响已选择的图片。如果有图片需要角度修正，上传图片速度会非常慢，要很有耐心等待！');
  		$(this).addClass('yes');
		IsRotateImg='yes';
  		$(this).find('em').animate({'left':'30px'},300);
  	}
});
function movethis(objs){
	objs.parent().remove();
}
function showFileName(fileObj){
	var files = fileObj.files;
	for(var i = 0, ilen = files.length; i < ilen; i++) {
		//alert(files[i].name);
		//alert(files[i].lastModifiedDate);
		selectFileImage(files[i]);
		//重新调整父窗口高度;
		window.parent.changiframeHeight($('.UpImgBox').height()+($('.UpImgBox').width()/2)+15);
	}
	$('.select input').val('');	
}
var upimgnum=0;
function uploadImages(picurl){
	upimgnum++;
	$('.ListImg').append("<li><span><img src='"+picurl+"'></span><em onClick='movethis($(this))'></em><textarea name='picurl"+upimgnum+"' style='display:none;'>"+picurl+"</textarea><input name='upimgnum[]' type='hidden' value='"+upimgnum+"'></li>");	
}
function checkInput(){
	if($('.ListImg input').eq(0).val()!='1'){
		alert('没有选择图片!');
		return false;
	}
	alert('移动端上传图片速度相对较慢，请耐心等待!');
}
</script>
</body>
</html>
<!--
EOT;
?>
-->