<?php
/**
* 20150520 11:50
* 作者：Ro
* 修改时间 20150522 13:50
* 修改内容 合并上传和截取图片功能
*/
//上传文件类型列表
$uptypes=array(
'image/jpg',
'image/jpeg',
'image/png'
);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="css/uppic.css" type="text/css" />
<title>头像上传</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="clear_float">
<?php
if(isset($_GET['name']))
{
echo'
<img src="/uppic/uppict/'.$_GET['name'].'" id="target" class="float"/>
<img src="/uppic/uppict/'.$_GET['name'].'" id="real_img" style="display:none;"/>
<div id="preview-pane">
<div class="preview-container">
<img src="/uppic/uppict/'.$_GET['name'].'" class="jcrop-preview float" alt="Preview" />
</div>
</div>
';
}
else
{
echo'
<img src="/uppic/uppict/default.jpg" id="target" class="float"/>
<img src="/uppic/uppict/default.jpg" id="real_img" style="display:none;"/>
<div id="preview-pane">
<div class="preview-container">
<img src="/uppic/uppict/default.jpg" class="jcrop-preview float" alt="Preview" />
</div>
</div>
';
}
?>
</div>
<form action="http://<?php echo $_SERVER['HTTP_HOST'];?>/uppic/controller/croppic.php?mothed=up" enctype="multipart/form-data" method="post" name="upform">
上传文件:
<input name="upfile" type="file">
<input type="submit" value="上传图片" class="btn btn-large btn-inverse"><br>
允许上传的文件类型为:<?=implode(', ',$uptypes)?>
</form>
<?php
if(isset($_GET['name']))
{
echo '
<form action="http://'.$_SERVER['HTTP_HOST'].'/uppic/controller/croppic.php?mothed=crop&name='.$_GET['name'].'" method="post" onsubmit="return checkCoords();">
';
}
else
{
echo '
<form action="http://'.$_SERVER['HTTP_HOST'].'/uppic/controller/croppic.php?mothed=crop&name=default.jpg" method="post" onsubmit="return checkCoords();">
';
}
?>
<!-- 记录截图坐标和宽高 -->
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="保存" class="btn btn-large btn-inverse"/>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<script src="js/crop.js"></script>
</body>
</html>
uppic.rar （15个子文件） 
uppic 
jcrop.docx 582KB views js 
jquery.Jcrop.js 41KB jquery.color.js 16KB crop.js 2KB jquery.min.js 91KB jquery.Jcrop.min.js 16KB croppic.php 4KB css jquery.Jcrop.css 3KB demos.css 3KB jquery.Jcrop.min.css 2KB uppic.css 980B
Jcrop.gif 329B main.css 120KB uppict 
default.jpg 763KB controller croppic.php 3KB userpic 资源评论
wangli11111112015-06-26有文档，里面有效果图，有说明，还可以吧- piaohyz2015-12-12很好，找的就是这个，谢谢~
- jasonhsh2017-08-18可以参考下
