Yii2.0 集成使用富头像上传编辑器

在开发过程中，我们会用到头像上传的功能。这里给大家推荐一款比较流行的头像上传组件，FullAvatarEditor 2.3（富头像上传编辑器）。

实际效果如图所示：

1.下载组件，下载地址：http://www.fullavatareditor.com/download.html；

2.在所需页面上导入相关js文件：

<script type="text/javascript" src="FullAvatarEditor2.3/scripts/swfobject.js"></script>
<script type="text/javascript" src="FullAvatarEditor2.3/scripts/fullAvatarEditor.js"></script>

3.在页面上需要一个ID唯一的标签，<p>、<div>都可以：

   <div>
    <p id="swfContainer">本组件需要安装Flash Player后才可使用，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。</p>
   </div>

4.在页面嵌入如下代码：（注意fullAvatarEditor.swf与expressInstall.swf的路径问题）

<script type="text/javascript">
   swfobject.addDomLoadEvent(function () {
      var swf = new fullAvatarEditor("FullAvatarEditor2.3/fullAvatarEditor.swf", "FullAvatarEditor2.3/expressInstall.swf", "swfContainer", {
      id : 'swf',
      upload_url : 'FullAvatarEditor2.3/php/upload.php',   //上传文件接口（可以带url参数）
      method : 'post',    //传递到上传接口中的查询参数的提交方式。更改该值时，请注意更改上传接口中的查询参数的接收方式
      src_upload : 0,    //是否上传原图片的选项，有以下值：0-不上传；1-上传；2-显示复选框由用户选择
      avatar_box_border_width : 0,
      avatar_sizes : '200*200|50*50',    // 自定义头像尺寸
      avatar_sizes_desc : '200*200像素|50*50像素'   // 与上联合起来使用 
     }, function (msg){ // 回调函数
      switch(msg.code)
      {
       //case 1 : alert("页面成功加载了组件！");break;
       //case 2 : 
        //alert("已成功加载图片到编辑面板。");
        //document.getElementById("upload").style.display = "inline";
        //break;
       case 3 :
        if(msg.type == 0)
        {
         alert("摄像头已准备就绪且用户已允许使用。");
        }
        else if(msg.type == 1)
        {
         alert("摄像头已准备就绪但用户未允许使用！");
        }
        else
        {
         alert("摄像头被占用！");
        }
       break;
       case 5 : 
        if(msg.type == 0)
        {
         if(msg.content.sourceUrl)
         {

          // 保存原图成功的提示信息，如果不保存原图则不需要
          alert("原图已成功保存至服务器，url为： " +　msg.content.sourceUrl+" " + "头像已成功保存至服务器，url为： " + msg.content.avatarUrls.join(" ")+" 传递的userid="+msg.content.userid+"&username="+msg.content.username);
         }
         else
         {

          // 上传成功后ajax提交到服务器处理头像信息写入对应数据库中
          $.ajax({
            type:'POST',
            url:'<?php echo Url::to(['sys-admin-info/save-avatar'])?>',
            data:{avatarData:msg.content.avatarUrls}, // 包含头像的路径信息，数组形式
            dataType:'json',
            success:function(result){
               if(result.success){
               $.messager.alert('提示',result.message);
            }else{
               $.messager.alert('错误',result.message);
            }
            }
          });
         }
        }
       break;
      }
     }
    );
    };
            });
        </script>