思路：
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; 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 HomeController; use ThinkController; /** * 图片上传 */ class UploadController extends Controller { // 图片上传 public function uploadImg() { $upload = new ThinkUpload();// 实例化上传类 $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/