参考：http://www.thinkphp.cn/topic/29123.html
如果上面的链接失效的话就在这下载：https://pan.baidu.com/s/1nvgOid7
提取码 ：j8p6
将参考网址中的文件复制到自己的项目中，主要需要第三方扩展文件中的（Vendor/ThinkImage），Public中的相关css和js，因为项目需要，将人家的修改了一点点，上传后的图片直接存储裁剪后的，其余裁剪的图片都不需要，（Home/Common）中的function.php里面的命名函数删除了，因为我这里采取的时间戳命名，增加了“重新上传”时删除磁盘中的图片（IndexController.class.php）：
<?php
namespace Home\Controller;
use Think\Controller;
use Vendor\ThinkImage\ThinkImage;
class IndexController extends Controller {
public function _iniaitlize(){
header("Content-type:text/html;charset=utf-8");
}
//初始化页面
public function index(){
$this->display();
}
//上传头像
public function uploadImg(){
$upload = new \Think\Upload(C('UPLOAD_CONFIG')); // 实例化上传类 , C('UPLOAD_CONFIG')配置见下面
//头像目录地址
$path = './Public/upload/headimg/'.date('Ymd').'/';
if(!$upload->upload()) { // 上传错误提示错误信息
$this->ajaxReturn(array('status'=>0,'info'=>$upload->getErrorMsg()));
}else{ // 上传成功 获取上传文件信息
$temp_size = getimagesize($path.time().'.jpg');
if($temp_size[0] < 100 || $temp_size[1] < 100){//判断宽和高是否符合头像要求
$this->ajaxReturn(array('status'=>0,'info'=>'图片宽或高不得小于100px！'));
}
$this->ajaxReturn(array('status'=>1,'path'=>$path.time().'.jpg','filename'=>date('Ymd').'/'.time().'.jpg'));
}
}
//裁剪并保存用户头像
public function cropImg(){
//图片裁剪数据
$params = I('post.'); //裁剪参数
if(!isset($params) && empty($params)){
$this->error('参数错误！');
}
//头像目录地址
$path = './Public/upload/headimg/';
//要保存的图片
$real_path = $path.I('filename');
//临时图片地址
$pic_path = $path.I('filename');
//实例化裁剪类
$Think_img = new ThinkImage(THINKIMAGE_GD);
//裁剪原图得到选中区域
$Think_img->open($pic_path)->crop($params['w'],$params['h'],$params['x'],$params['y'])->save($real_path);
//生成缩略图
//$Think_img->open($real_path)->thumb(100,100, 1)->save($path.I('filename').'_100.jpg');
//$Think_img->open($real_path)->thumb(60,60, 1)->save($path.I('filename').'_60.jpg');
//$Think_img->open($real_path)->thumb(30,30, 1)->save($path.I('filename').'_30.jpg');
$this->success('上传头像成功');
}
//当用户点击重新上传后，删除本地磁盘中的文件
public function deleteImg(){
$result = unlink(realpath('./Public/upload/headimg/'.I("pathname")));
if($result){
$data['status']=1;
}else{
$data['status']=0;
}
$this->ajaxReturn($data);
}
}
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头像上传</title>
<load href="__PUBLIC__/css/jquery.Jcrop.min.css" />
<load href="__PUBLIC__/css/bootstrap.css" />
<load href="__PUBLIC__/js/uploadify-v3.1/uploadify.css" />
<load href="__PUBLIC__/js/jquery-3.1.1.min.js" />
<load href="__PUBLIC__/js/bootstrap.min.js" />
<load href="__PUBLIC__/js/uploadify-v3.1/jquery.uploadify-3.1.min.js" />
<load href="__PUBLIC__/js/jquery.Jcrop.min.js" />
<load href="__PUBLIC__/js/ThinkBox/jquery.ThinkBox.js" />
<load href="__PUBLIC__/js/ThinkBox/css/ThinkBox.css" />
<style type="text/css">
.main{ margin: 0 auto; padding: 15px; width: 450px; height: 250px; font-family: "microsoft yahei";background-color: #F5F5F5; }
.upload-area { position: relative; float: left; margin-right: 30px; width: 200px; height: 200px;background-color: #F5F5F5; border: 2px solid #E1E1E1; }
.upload-area .file-tips { position: absolute; top: 90px; left: 0; padding: 0 15px; width: 170px;
line-height: 1.4; font-size: 12px; color: #A8A8A3; text-align: center; }
.userup-icon { display: inline-block; margin-right: 3px; width: 16px; height: 16px; vertical-align: -2px; background: url("__PUBLIC__/images/userup_icon.png") no-repeat;}
.uploadify-button { line-height: 120px!important; text-align: center; }
.preview-area { float: left; }
.tcrop { clear: right; font-size: 14px; font-weight: bold; }
.update-pic .crop { background: url("__PUBLIC__/images/mystery.png") no-repeat scroll center center #EEEEEE; float: left; margin-bottom: 20px; margin-top: 10px; overflow: hidden; }
.crop100 { height: 100px; width: 100px; }
.crop60 { height: 60px; margin-left: 20px; width: 60px; }
.preview { position: absolute; top: 0; left: 0; z-index: 11; width: 200px; height: 200px; overflow: hidden; background:#fff; display: none; }
</style>
</head>
<body>
<div class="main">
<!-- 修改头像 -->
<form action="{:U('Index/cropImg')}" method="post" id="pic" class="update-pic cf">
<!--刚刚上传的图片，因为是时间戳形式，所以需要将值带走-->
<input type="hidden" name="filename" id="filename">
<div class="upload-area">
<input type="file" id="user-pic">
<div class="file-tips"></div>
<div class="preview hidden" id="preview-hidden"></div>
</div>
<div class="preview-area">
<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="hidden" id='img_src' name='src'/>
<div class="tcrop">头像预览</div>
<div class="crop crop100"><img id="crop-preview-100" src="" alt=""></div>
<div class="crop crop60"><img id="crop-preview-60" src="" alt=""></div>
</div>
<br/>
<button type="submit" class="btn btn-primary save-pic">保存头像</button>
<a class="btn btn-primary reupload-img" style="text-decoration:none;">重新上传</a>
</form>
</div>
<!-- /修改头像 -->
<script type="text/javascript">
$(function(){
//上传头像(uploadify插件)
$("#user-pic").uploadify({
'queueSizeLimit' : 1,
'removeTimeout' : 0.5,
'preventCaching' : true,
'multi' : false,
'swf' : '__PUBLIC__/js/uploadify-v3.1/uploadify.swf',
'uploader' : '{:U("Index/uploadImg")}',
'buttonText' : '<i class="userup-icon"></i>上传头像',
'width' : '200',
'height' : '200',
'fileTypeExts' : '*.jpg; *.png; *.gif;',
'onUploadSuccess' : function(file, data, response){
//调试语句
console.log(data);
var data = $.parseJSON(data);
$("#filename").val(data['filename']); //将刚刚上传的图片名称读取出来
if(data['status'] == 0){
$.ThinkBox.error(data['info'],{'delayClose':3000});
return;
}
var preview = $('.upload-area').children('#preview-hidden');
preview.show().removeClass('hidden');
//两个预览窗口赋值
$('.crop').children('img').attr('src',data['path']+'?random='+Math.random());
//隐藏表单赋值
$('#img_src').val(data['path']);
//绑定需要裁剪的图片
var img = $('<img />');
preview.append(img);
preview.children('img').attr('src',data['path']+'?random='+Math.random());
var crop_img = preview.children('img');
crop_img.attr('id',"cropbox").show();
var img = new Image();
img.src = data['path']+'?random='+Math.random();
//根据图片大小在画布里居中
img.onload = function(){
var img_height = 0;
var img_width = 0;
var real_height = img.height;
var real_width = img.width;
if(real_height > real_width && real_height > 200){
var persent = real_height / 200;
real_height = 200;
real_width = real_width / persent;
}else if(real_width > real_height && real_width > 200){
var persent = real_width / 200;
real_width = 200;
real_height = real_height / persent;
}
if(real_height < 200){
img_height = (200 - real_height)/2;
}
if(real_width < 200){
img_width = (200 - real_width)/2;
}
preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});
}
//裁剪插件
$('#cropbox').Jcrop({
bgColor:'#333', //选区背景色
bgFade:true, //选区背景渐显
fadeTime:1000, //背景渐显时间
allowSelect:false, //是否可以选区，
allowResize:true, //是否可以调整选区大小
aspectRatio: 1, //约束比例
minSize : [100,100],//可选最小大小
boxWidth : 200, //画布宽度
boxHeight : 200, //画布高度
onChange: showPreview,//改变时重置预览图
onSelect: showPreview,//选择时重置预览图
setSelect:[ 0, 0, 100, 100],//初始化时位置
onSelect: function (c){ //选择时动态赋值，该值是最终传给程序的参数！
$('#x').val(c.x);//需裁剪的左上角X轴坐标
$('#y').val(c.y);//需裁剪的左上角Y轴坐标
$('#w').val(c.w);//需裁剪的宽度
$('#h').val(c.h);//需裁剪的高度
}
});
//提交裁剪好的图片
$('.save-pic').click(function(){
if($('#preview-hidden').html() == ''){
$.ThinkBox.error('请先上传图片！');
}else{
//由于GD库裁剪gif图片很慢，所以长时间显示弹出框
$.ThinkBox.success('图片处理中，请稍候……',{'delayClose':30000});
$('#pic').submit();
}
});
}
});
//重新上传,清空裁剪参数
$('.reupload-img').click(function(){
$.ajax({
type:"post",
data:{pathname:$("#filename").val()},
url:"{:U('Index/deleteImg')}",
dataType:"json",
success:function(data){
if(data.status==1){
$(".preview-area").load(location.href+" .preview-area");
}
}
});
$('#preview-hidden').find('*').remove();
$('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
});
//预览图
function showPreview(coords){
var img_width = $('#cropbox').width();
var img_height = $('#cropbox').height();
//根据包裹的容器宽高,设置被除数
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#crop-preview-100').css({
width: Math.round(rx * img_width) + 'px',
height: Math.round(ry * img_height) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
rx = 60 / coords.w;
ry = 60 / coords.h;
$('#crop-preview-60').css({
width: Math.round(rx * img_width) + 'px',
height: Math.round(ry * img_height) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
})
</script>
</body>
</html><?php
return array(
//图片上传配置
'UPLOAD_CONFIG' => array(
'mimes' => array(), //允许上传的文件MiMe类型
'maxSize' => 0, //上传的文件大小限制 (0-不做限制)
'exts' => array('jpg', 'gif', 'png', 'jpeg'), //允许上传的文件后缀
'autoSub' => true, //自动子目录保存文件
'subName' => array('date','Ymd'), //子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
'rootPath' => './Public/upload/headimg/', //保存根路径
'savePath' => '', //保存路径
'saveName' => 'time', //上传文件命名规则，[0]-函数名，[1]-参数，多个参数使用数组
'saveExt' => 'jpg', //文件保存后缀，空则使用原后缀
'replace' => true, //存在同名是否覆盖
'hash' => true, //是否生成hash编码
//'callback' => false, //检测文件是否存在回调，如果存在返回文件信息数组
//'driver' => 'Local', // 文件上传驱动
//'driverConfig' => array(), // 上传驱动配置
),
);
?>
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
