<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
   String base = pageContext.getServletContext().getContextPath();
   String resources = base+"/static";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片-不倒翁</title>
<link rel="stylesheet" href="//g.alicdn.com/sui/sui3/0.0.18/css/sui.css">
<link rel="stylesheet" href="<%=resources%>/css/common.css"/>

   <style type="text/css">
   	.nav,.nav-pills li{text-align: center;}
   	.nav,.nav-pills li span{cursor:pointer}
   	.nav-pills > li + li {margin-left: 12px;}
   	.nav,.nav-pills li p{margin-top: 5px;}
   </style>

</head>
<body style="min-width:none">
    

  <form id="imageform" name="imageform" method="post" enctype="multipart/form-data" action="index.html?action=uploadimage">
	<input type="file" name="photoimg" style="display:none" name="photoimg" id="photoimg" />
</form>

   <div class="">
	   	<ul class="nav nav-pills">
		  <c:forEach var="url" items="${model.list}" varStatus="status">
		  		<li>   
			    <span data="${url}"><img src="${url}" alt="" class="img-thumbnail" style="width:140px;height:120px"/></span>
			    <p><button type="button" data="${url}" class="btn btn-primary">删除</button> </p>
			    </li>
			</c:forEach>
		</ul>
    <nav>
	    <div class="pagination">${model.toString()}
	    <div>
	      <span>共${model.pages}页&nbsp;</span><span><span class="page-num"></span> <button id="uploadBtn" class="page-confirm">上传新图片</button></span>
	    </div>
	    </div>
    </nav>
    </div>
    <script type="text/javascript" src="//g.alicdn.com/sj/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="//g.alicdn.com/sui/sui3/0.0.18/js/sui.js"></script>
    <script src="<%=resources%>/js/jquery.form.min.js" type="text/javascript"></script>
	<script src="<%=resources%>/js/common.js" type="text/javascript"></script>
	<script type="text/javascript">
	window.hosturl = "<%=base%>";
	var targetId = "";
	function setImagepath(imgPath){
		window.parent.ImageUpload.setImagepath(imgPath);
		window.parent.ImageUpload.hide();
	}
	//因为文件AJAX上传的原因，所以回调函数需要自己处理		
	function uploadCallback(data){
		var obj = $.parseJSON(data.responseText);
		setImagepath(obj.url);
		window.location = window.location;
	}

	$(function(){
		targetId=$.getUrlParam("targetId");
		 $('#photoimg').on('change', function(){
			 	$.toast("图片上传中...");
		      	$("#imageform").ajaxForm({success:function(data){
		      		uploadCallback(data);
		      	},error:function(data){
		      		uploadCallback(data);
		      	}}).submit();
		 });

		$(".nav-pills li span").click(function(){
			$this = $(this);
			var data = $this.attr("data");
			setImagepath(data);

			return false;
		});
		
		$(".nav-pills li button").click(function(){
			$this = $(this);
			var data = $this.attr("data");

			if(confirm('是否删除文件?')){
				$.ajax({
					url: "deleteFile.html",
					type: "POST",
					data: {fileName:data},
					dataType: "json",
					cache: false,
					success: function(ret) {
						if (ret.is) {
							$.toast("删除成功！","success");
							$this.closest("li").remove();
						}else{
							$.toast(ret.msg,"warning");
						}
					}
				});
			}
			return false;
		});
		
		$('#uploadBtn').on('click',function(){$('#photoimg').click();});
	});
</script>
</body>
</html>