bulomakaka
/
ekexiu.com.portal


			
				
					
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!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, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>头像上传</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/login.css" rel="stylesheet">
	
</head>
<body>
<div class="coverbox">
  <div class="photo-box">
	<div class="photo-title">头像设置</div>
             <div class="photo-set">
                 <div class="photo-upload">
                     <!--点击上传按钮-->
                     <div class="load">
                          <div class="upbtn" style="Margin:auto" ><span class="plus">+</span>本地上传<input type="file" class="filebtn"  name="file" id="uploadInput" ></div>
                         <p>只支持JPG、PNG，大小不超过5M</p>
                         
                     </div>
                     <!---->
                     <!--选择图片尺寸-->
                     <div class="wrap" id="jcropdiv">
                                 <div class="wl">
                                     <div class="jc-demo-box" data="0">
                                         <div id="target" class="jcrop_w" >
                                             <img src="" width="602" height="400" id="headImage" />
                                         </div>
                                     </div>
                                     <!-- <div class="jy-up-ch" >
                                         <a id="idLeft" href="" class="bch bch1"></a>
                                         <a id="idSmall" href="" class="bch bch2"></a>
                                         <a id="idBig" href="" class="bch bch3"></a>
                                         <a id="idRight" href="" class="bch bch4"></a>
                                     </div> -->
                                 </div>
                     </div>
                     <!---->
                 </div>
     
                 <div class="photo-size">
                     <div class="wr" id="preview-pane">
                         <div class="preview-container">
                             <p>头像预览</p>
                             <div class="pre-1">
                                 <img  src="" class="jcrop-preview jcrop_preview_s" alt="" id="largeImage"/>
                             </div>
                             <p>200px*200px</p>
                             <div class="pre-2">
                                 <img src="" class="jcrop-preview jcrop_preview_s" alt="" id="middleImage"/>
                             </div>
                             <p>66px*66px</p>
                             <div class="pre-3">
                                 <img src="" class="jcrop-preview jcrop_preview_s" alt="" id="smallImage"/>
                             </div>
                             <p>30px*30px</p>
                         </div>
                     </div>
                 </div>
             </div>	
	<input id="x" type="hidden"/>
	<input id="y" type="hidden"/>
	<input id="w" type="hidden"/>
	<input id="h" type="hidden"/>
             <div class="upload-file">
             	  <!--<div class="fl">
                    <div class="upbtn"><span class="plus">+</span>本地上传<input type="file" class="filebtn"  name="file" id="uploadInput" ></div>
                     <p>只支持JPG、PNG、GIF，大小不超过5M</p> 
                 </div>
                 <div class="fl">
                 	<button type="button" id="uploadBtn">UPLOAD</button>
                 </div>
                 -->
                 <div class="clear"></div>
             </div>
	<input type="button" value="保存" class="inputtxt inputtxtbtn save" id="saveImage">
	<input type="button" value="取消" class="inputtxt inputtxtbtn  close" >
	<input type="button" value="返回" class="inputtxt inputtxtbtn " id="back" >
	
  </div>
</div>
 
<div id="header"></div>
<div id="footer"></div>    
         
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.HeadP.js"> </script>
<script type="text/javascript" src="js/jquery.Jcrop.js"> </script>
<script type="text/javascript" src="js/basic.js"> </script>
<script type="text/javascript" src="/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/jquery.similar.msgbox.js"></script>	
<script type="text/javascript"src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function (){
	var _widht = document.documentElement.clientWidth;  //屏幕宽
	var _height = document.documentElement.clientHeight; //屏幕高
	var boxWidth = $(".photo-box").width();
	var boxHeight = $(".photo-box").height();
	$(".photo-box").css({ top:"40px", left: (_widht - boxWidth) / 2 + "px" });
    $('#largeImage').attr("style","");
    $('#middleImage').attr("style","");
    $('#smallImage').attr("style","");
	var id = $.cookie('userid');
	var cacheImageKey=null;
	if(id){
		$("#headImage").attr("src","/images/head/"+id+"_l.jpg");
		$("#smallImage").attr("src","/images/head/"+id+"_s.jpg");
		$("#middleImage").attr("src","/images/head/"+id+"_m.jpg");
		$("#largeImage").attr("src","/images/head/"+id+"_l.jpg");
		$('#uploadInput').live('change',function(){ 
			$("#jcropdiv").show();
			$(".load").hide();
			$.ajaxFileUpload({
				url:"../ajax/cachedFileUpload",
				secureuri:false,
				fileElementId:"uploadInput",
				dataType:"json",
				success:function($data){
				     console.log($data);
					if($data.success){
						cacheImageKey =$data.data[0].cacheKey;
						 console.log(cacheImageKey);
						$("#headImage").attr("src","/images/tmp/"+cacheImageKey);
						$("#smallImage").attr("src","/images/tmp/"+cacheImageKey);
						$("#middleImage").attr("src","/images/tmp/"+cacheImageKey);
						$("#largeImage").attr("src","/images/tmp/"+cacheImageKey);
					}else{
						$.MsgBox.Alert("message",$data.msg);
					}
				},
				error:function(){
					$.MsgBox.Alert("message","upload error");
				}    					
			});
		});
		
	}
    
    //保存
	$("#saveImage").on("click",function(){
		var x = parseInt($("#x").val()/395*100);
		var y = parseInt($("#y").val()/340*100);
		var w = parseInt($("#w").val()/395*100);
		var h = parseInt($("#h").val()/340*100);
		if(cacheImageKey){
			$.ajax({
				url:"../ajax/image/head",
				type:"POST",
				data:{"id":id,"fn":cacheImageKey,"x":x,"y":y,"w":w,"h":h},
				dataType:"json",
				success:function($data){
				    console.log($data);
					if($data.success){
						$.MsgBox.Alert("消息","上传成功");
						location.reload(true);
						
					}else{
						$.MsgBox.Alert("message",$data.msg);
					}
				}
			});
		}
	});
    //取消
	$(".close").on("click",function(){
		$(".load").show();
		$("#jcropdiv").hide();
		$("#headImage").attr("src","");
		$("#smallImage").attr("src","");
		$("#middleImage").attr("src","");
		$("#largeImage").attr("src","");
	})
    
    //返回
	$("#back").on("click",function(){
		location.href="index.html";
	})
})
</script>
</body>
</html>