<%@page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">  
<link rel="stylesheet" type="text/css" href="/SinoGYS/css/weui.css">
<link rel="stylesheet" type="text/css" href="/SinoGYS/weixincss/jquery-weui.css">
<link rel="stylesheet" type="text/css" href="/SinoGYS/css/base.css">
<script src="/SinoGYS/js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="/SinoGYS/layer/skin/layer.css"></script>
<script type="text/javascript" src="/SinoGYS/layer/layer.js"></script> 
<script src="/SinoGYS/js/static/jquery.min.js"></script>  
<script src="/SinoGYS/js/static/jquery-weui.js"></script>  
<script src="/SinoGYS/js/static/lrz/lrz.bundle.js"></script>   
<title>中道救援服务商管理中心</title>
<style type="text/css">
	.upload_btn {
		position: relative;
		margin-left: 8px;
	    margin-right: auto;
	    padding-left: 14px;
	    padding-right: 14px;
	    width:45%;
	    font-size: 18px;
	    text-align: center;
		text-decoration: none;
		cursor: pointer;
		color: white;
		box-sizing: border-box;
	    line-height: 2.33333333;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		overflow: hidden;
		display: inline-block;
		*display: inline;
		*zoom: 1
	}
	
	.upload_btn  input {
		position: absolute;
		font-size: 100px;
		right: 0;
		top: 0;
		opacity: 0;
		filter: alpha(opacity = 0);
		cursor: pointer
	}
	
	.img_div{
		/* border: 1px solid red; */
		max-height: 60%;
		width: 100%;
		position: relative;
		text-align: center;
	}
	
	.img_div img{
		min-height:200px;
		max-height: 300px;
		max-width: 100%;
	}
</style>
</head>


<body>
		<header class="hd" style="padding: 25px 0;font-size: 16px;">
  				<h1 class="page_title">上传照片</h1>
		</header>
		<div >
			<div class="weui-row">
		      <div class="weui-col-50 img_div img_div_1" ></div>
		      <div class="weui-col-50 img_div img_div_2" ></div>
		    </div>
			<div class="weui-row">
		      <div class="weui-col-50 img_div img_div_3" ></div>
		    </div>
		
		</div>
	
	
		
	<div class="weui_btn_area" style="position: fixed;bottom: 0px;width: 90%;margin: 0 5% 18px 5%;">
        <a class="upload_btn weui_btn_sino" href="javascript:" >拍照 <input accept="image/*" type="file" id="file"/></a>
		<a class="upload_btn weui_btn_primary" href="javascript:" id="upload" >上传</a>
    </div>
    
    
</body>
 
<script type="text/javascript">
	
	var data = new Array();
	var count=0;
	 $("#file").blur(function(){
	 	$.hideLoading();
	}); 
	$("#file").click(function(){
	 	$.showLoading();
	}); 
	$("#file").change(function(){
		
		if(count>=3){
			$.alert( "对不起！您上传的照片已达到上限,无法继续上传！");
		}else{
			
		 lrz(this.files[0], {
		        width: 400
		    }).then(function (rst) {
			 if(rst.base64.length==0){
		    	$.alert( "照片未成功选择，请重新拍照");
		    }else{
				data.push(rst.base64.split(",")[1]);
				console.log(data);
				console.log(".img_div_"+data.length);
				var img = new Image();
				img.onload = function () {
					$(".img_div_"+data.length ).html(img);
				}; 
				img.src = rst.base64;  
				 $.hideLoading();   
				count=count+1;
			}
        });
	  }
	});
	
	$("#upload").click(function(){
		if(data.length){
				parent.$('#image_01').val(data[0]);
				parent.$('#image_02').val(data[1]);
				parent.$('#image_03').val(data[2]);
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.msg("上传成功");
                parent.layer.close(index);
		}else{
			$.toast("没有图片", "forbidden");
		}
	});
</script>

</html>