thinkphp3.2.3富头像上传编辑器

来源:互联网 发布:小米4手机没有3g网络 编辑:程序博客网 时间:2024/03/28 23:18

最近做项目,要用到头像上传,自己试了两种插件,比如jquery的uploadify和富头像编辑器。但是觉得富头像插件可能比uploadify好一点,但是自己还是调试了好久,废话不多说,上代码,说说我所遇到的问题(其实就是自己没有看文档)

效果图

                                       

点击上传图片后

                                      

                                     

我想要的效果就是,当我上传成功,并存到数据库成功后,第一张图就能够异步无刷新的变成右边这两张图。

                                   

并且左边菜单栏的圆圈的图片也能无刷新的异步成新的头像,其实这是涉及到了js的问题,后面会说到。

用到这个插件,首先我们就要了解它,我们需要准备这些东西

<!-路径因项目而异要用的话可能就要改,我是放在项目的同级目录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文档都找不到了,有些参数也没办法知道他是什么意思。

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


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

原创粉丝点击