思路：
1.数据库 创建test2 创建表img，字段id，url，addtime
2.前台页：
1>我用的是bootstrap 引入必要的js，css
2>引入美图秀秀的js
3.后台：图片上传
直接上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>thinkphp+美图接口，实现图片上传+裁切</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.css"></head>
<style type="text/css">
html, body { height:100%; overflow:hidden; }
body { margin:0; }
</style>
<body>
<div class="container">
<div class="panel">
<a rowspan="3" class="text-center" data-toggle="modal" data-target="#head">
<notempty name="info">
<img id="img" src="{$info.url}" width="150px" class="img-rounded" />
<else/> <i class="glyphicon glyphicon-user" style="color:#6E6E6E; font-size:150px;"></i>
</notempty>
</a>
</div>
</div> <div class="modal fade" id="head" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<style>.modal-body object{ position:relative;}</style>
<div class="modal-body">
<div class="clearfix" style="position:absolute; width:100%; left:0px; right:0px;" >
<div id="altContent"></div>
</div>
<script src="__PUBLIC__/js/xiuxiu.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
/*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/
xiuxiu.embedSWF("altContent",5,"100%","400px",'headeditor');
//修改为您自己的图片上传接口
xiuxiu.setUploadURL("{:C('URL')}/index.php/Home/Upload/uploadImg.html");
xiuxiu.setUploadType(2);
//xiuxiu.setUploadDataFieldName("upload_file");
xiuxiu.onInit = function ()
{
xiuxiu.loadPhoto("{:C('URL')}{$info.url}");
}
xiuxiu.onBeforeUpload = function (data, id)
{
var size = data.size;
if(size > 2 * 1024 * 1024)
{
alert("图片不能超过2M");
return false;
}
return true;
}
xiuxiu.onUploadResponse = function (data)
{
//data=JSON.parse(data);
setTimeout(function(){
window.location.reload();
},1000);
//alert("上传响应" + data); //可以开启调试
}
// 调试
/*xiuxiu.onDebug = function (data)
{
alert("错误响应" + data);
}*/
}
</script>
</div>
</div>
</div>
</div> </body>
</html>
uploadcontroller.class.php
<?php
namespace Home\Controller;
use Think\Controller;
/**
* 图片上传
*/
class UploadController extends Controller
{
// 图片上传
public function uploadImg()
{ $upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './image/'; // 设置附件上传目录
//$upload->savePath = 'img/'; // 设置附件上传目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$where = array('id'=>1);
foreach ($info as $file) {
$savename = $upload->rootPath.$file['savepath'].$file['savename'];
$msg = M('Img')->where($where)->find();
if ($msg) {
$res = M('Img')->where($where)->setField('url',$savename);
}else{
$data = array(
'id' => 1,
'url' => $savename,
'addtime' => time()
);
$res = M('Img')->add($data);
}
$this->ajaxReturn(array('img'=>$savename,'status'=>1));
}
}
} } ?>
下载完整demo，带数据库sql文件
美图秀秀的详细开发文档：http://open.web.meitu.com/wiki/