<style type="text/css">
*{
padding:0;
margin:0;
}
#previewImgHolder{
position:absolute;
top:0;
left:0;
border:solid 1px green;
}
.picPreviewWrap{
 margin-top:45px;
}
</style>
<%=title%></title>
<script type="text/javascript">
 $(function(){
 //图片提交前预览:
 /*表单的file控件被填值时,即发生change事件时就提交这个页面的表单,
 服务器将提交过来的图片从临时文件夹转移到"/WebstormProjects/web/uploads/postPicPreview/"
 然后返回给本页面一个值1,(picFlag),当picFlag的值不为空时引发函数checkPicFlag从服务器get图片作为预览
 */
    function checkPicFlag(){
	    var checkPicFlag=$("#picFlag").text();
		if(checkPicFlag){
		   var username=getTargetCookie("username");
		   var imgUrl="/WebstormProjects/web/uploads/postPicPreview/"+username+"/"+checkPicFlag;
		   var img=$("<img src='"+imgUrl+"' />");
		   $("#previewImgHolder").append(img); 
		}
	}
	checkPicFlag();
})
</script>
<link rel='stylesheet' href='/stylesheets/post.css' />
<script type="text/javascript">
 $(function(){
  $("#uploadedMyImg").bind("change",function(e){ 
	   document.getElementById("replyImg").submit();
   }); 
})
</script>

<div id="picFlag" style="display:none;">
<%=picFlag%></picFlag>
</div>
<div id="previewImgHolder">
</div>

<div class="picPreviewWrap">
<form action="postPicPreview.ejs" method="post" id="replyImg" enctype="multipart/form-data" />
<input type="file" name="uploadedImg" id="uploadedMyImg" value=""    /><br />
</form>
</div>