thinkphp3.2.3富头像上传编辑器

<!-路径因项目而异要用的话可能就要改，我是放在项目的同级目录Public的子目录Uploadify里，但是后面的swfobject.js,fullAvatarEditor.js是必须的---><script src="__PUBLIC__/admin_js/jquery.min.js?v=2.1.4"></script><script type="text/javascript" src="__PUBLIC__/Uploadify/swfobject.js"></script><script type="text/javascript" src="__PUBLIC__/Uploadify/fullAvatarEditor.js"></script>

现在开始上代码！！！

html代码

<div class="form-group"><label class="col-sm-1 control-label">当前头像:</label><img class="col-sm-3" src='' id='cur_img' width='350px' height='300px'><div class='col-sm-8'><p id="swfContainer">本组件需要安装Flash Player后才可使用，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。</p></div></div>

因为重点问题还是出在了js代码上，最后会细述，其实就是这个插件的一些参数问题，先上php代码

Thinkphp代码

public function uploadImg(){$model=M('admin_user');$where['username']=session("username");if (IS_POST) {header('Content-Type: text/html; charset=utf-8');$result = array();$username=I('username');$msg = '';//上传目录$path='avatar/';// 取服务器时间+8位随机码作为部分文件名，确保文件名无重复。$filename = date("YmdHis").'_'.floor(microtime() * 1000).'_'.createRandomCode(8);//如果文件存在，就删除原文件/* if (file_exists($path)) {delDir($path);}$avatars = array("__avatar1");$avatar = $_FILES[$avatars['0']];if ($avatar['error'] > 0 ){$msg .= $avatar['error'];}//如果文件不存在，创建文件if(!file_exists($path)){ makeDir($path);}*/        $avatars = array("__avatar1"); $avatar = $_FILES[$avatars['0']]; if ($avatar['error'] > 0 ){       $msg .= $avatar['error'];  }      makeDir($path);$savePath = $path . $filename . ".jpg";  if(move_uploaded_file($avatar["tmp_name"], $savePath)){  //将图片存到数据库  $res=$model-> where($where)->setField('image_path',$savePath);  if($res===false){ $result['success'] = false;    }else{ //将数组$result封装成json数据，传到前端$result['msg'] = $msg;   $result['success'] = true;  $result['img']=$savePath; }        echo json_encode($result); }else{  $result['success'] = false;  }    }  }

注意！ 这段代码中用到的几个方法（makeDirD($path)、delDir($path)、createRandomCode($length)） ！！！，写在了function.php（Application/common/common/function.php）中

function.php

<?php
/*** 功能：检测一个目录是否存在，不存在则创建它* @param string    $path      待检测的目录* @return boolean*/
function makeDir($path) {return is_dir($path) or (makeDir(dirname($path)) and @mkdir($path, 0777));
}/*** 功能：检测一个目录是否存在，存在则删除它* @param string    $path      待检测的目录* @return boolean*/
function delDir($path) {if(is_file($path)){unlink($path);return;}$handle=opendir($path);while($filename=readdir($handle)){if($filename=='.' ||$filename=='..'){continue;}$new_path=$path.'/'.$filename;if(is_dir($new_path)){del_dir($new_path);}if(is_file($new_path)){unlink($new_path);}}closedir($handle);rmdir($path);
}/**************************************************************
*  生成指定长度的随机码。
*  @param int $length 随机码的长度。
*  @access public
**************************************************************/
function createRandomCode($length)
{$randomCode = "";$randomChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';for ($i = 0; $i < $length; $i++){$randomCode .= $randomChars { mt_rand(0, 35) };}return $randomCode;
}
?>

js代码(这是我们需要去好好了解这个插件的地方，不了解的话，就不知道怎么用了，怎么去改人家的代码）

该插件需要正式环境（就是必须在服务器环境才能使用，如apache、tomact等环境下才可以，在本地，像浏览自己写好的静态html页面那样是不行的）

//头像上传 插件swfobject.addDomLoadEvent(function () {//以下两行代码正式环境下请删除if(location.href.indexOf('http://') == -1) 5alert('请于WEB服务器环境中查看、测试！\n\n既 http://*/simpleDemo.html\n\n而不是本地路径 file:///*/simpleDemo.html的方式');var swf = new fullAvatarEditor("__PUBLIC__/Uploadify/fullAvatarEditor.swf", "__PUBLIC__/Uploadify/expressInstall.swf", "swfContainer", {id : 'swf',upload_url : "{:U('User/uploadImg')}",   //上传接口method : 'get', //传递到上传接口中的查询参数的提交方式。更改该值时，请注意更改上传接口中的查询参数的接收方式src_upload : 2,     //是否上传原图片的选项，有以下值：0-不上传；1-上传；2-显示复选框由用户选择avatar_box_border_width : 0,tab_visible: false,//是否显示选项卡*avatar_sizes : '200*250',//avatar_sizes_desc : '200*250',avatar_tools_visible : false,checkbox_visible : false}, function (msg) {switch (msg.code) {// case 1: alert("页面成功加载了组件！"); break;//  case 2: alert("已成功加载默认指定的图片到编辑面板。"); break;case 3:if (msg.type == 0) {alert("摄像头已准备就绪且用户已允许使用。");}else if (msg.type == 1) {alert("摄像头已准备就绪但用户未允许使用！");}else {alert("摄像头被占用！");}break;case 5://alert(msg.type);if(msg.type==0){alert('操作成功！');document.getElementById("cur_img").src="__ROOT__/Uploads"+msg.content.img;//获取到上传的图片路径$('#adminImg', window.parent.document).attr('src',"__ROOT__/"+msg.content.img);//修改左侧菜单栏的头像}}});});

首先来讲一下这个插件的调用方法，

new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]); 

1.swfContainerID是包裹这个插件的HTML标签，在我的代码中，用的是p标签。这个参数是必须的
2.其次最重要的是这个[callback]回调函数，注意这个回调函数是flash执行某些操作时的回调函数！我先前误认为是上传成功后 的回调函数，其实并不是。
3.在php代码中，我们看到是$result封装成json数据，js代码中的回调函数是function(msg)，那他的内容是什么呢，我们来执行代码，看一下结果




所以我们就要搞明白function（msg){
    switch(msg.code){
       case 1:.....;break;
       case 2:.....;break;
       case 5:if(msg.type==0){
              alert(msg.content.xxxx);
}break;
}
}
是什么意思，不看文档还真TM不知道是啥！！！上传成功后的又要怎么写一些我想要的js代码？！！！
还好http://www.bubuko.com/infodetail-413642.html这篇文章有一丢丢用！
callback 回调函数


执行该函数时，函数中的this关键字指向表示swf的HTMLObjectElement，并且会给函数传递一个表示事件消息的json对象作为参数。
json对象的属性如下：
code : Number主要用来辨识消息的具体来源和内容，以便客户端知道如何处理。
type : Number0 表示成功，1 表示警告，2 表示错误，3 表示异常。
content : *表示消息的内容


所以，在msg.code=5，又当msg.type=0时，我们就知道图片上传成功，因此我们还可以获得json格式的$result的内容，比如'msg','path','success'

var src=msg.content.path；//获取保存图片的路径

而不是像我们以前写的那样。。。

msg.img;
var obj=eval("("+msg+")");
obj.msg.img;
/*
因为它是插件！！所以获取内容的方式还得跟着他的文档来。。。*/

最后说说为啥我不用uploadify吧，虽然uploadify虽然比较好上手（个人觉得富头像可能复杂一点。可能是我不会用，还有一个原因是现在富头像的官网找不到了，我看不了他的API文档）,但是uploadify的兼容性十分不好，毕竟他自己官网上的demo有的时候我都不能用，更别说自己写了用了，他的flash插件加载不进来，有的时候上传按钮的样式不是uploadify所带的样式，有的时候点击上传按钮，他还弹不出来文件选择框。我也是很崩溃的。之前之所以不用富头像文本是因为它的选项卡我嫌太丑了，又不知道怎么改，后来查了一些相关信息，才知道可以不显示选项卡，还有获取它返回的json数据的内容也是一样的，奈何现在能查到的富头像上传API文档都找不到了，有些参数也没办法知道他是什么意思。

我觉得这个插件也不算特别好，希望大家有好的插件可以推荐个给我啦，谢谢大家


源代码，等我整理好会分享给大家哒，哈哈