思路：
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/