|
<!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、GIF，大小不超过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>50px*50px</p>
<div class="pre-3">
<img src="" class="jcrop-preview jcrop_preview_s" alt="" id="smallImage"/>
</div>
<p>26px*26px</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" });
var id = $.cookie('userid');
var cacheImageKey=null;
if(id){
$("#headImage").attr("src","/images/head/"+id+"_l.jpg");
$("#smallImage").attr("src","/images/head/"+id+"_l.jpg");
$("#middleImage").attr("src","/images/head/"+id+"_l.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){
if($data.success){
cacheImageKey =$data.data[0].cacheKey
$("#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){
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>
|
