ecshop二次开始--头像上传

电玩女神 2022-07-24 07:16 87阅读 0赞

1.打开网址：http://www.fullavatareditor.com/download.html

![Center][]

![Center 1][]

代码实现：

**1.首先先在themes\\default\\library\\user\_menu.lbi中插一条**

![Center 2][]

2.**在user.php的action列表中的数组中加一个avatar**

**![Center 3][]**

3：**在upload\\user.php中插一条elseif语句，调用模板**

elseif($action == 'avatar')
    
    {
    
    $smarty->assign('uid',$user_id);//传一个用户id到user_transaction.dwt页面
    
          $smarty->display('user_transaction.dwt');
    
    }

**4：在themes\\default\\user\_transaction.dwt的上面加上一下代码**

<h5><span>用户头像</span></h5>
    
                         <table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#dddddd">
    
                          <tr>
    
                            <td align="center" bgcolor="#FFFFFF">
    
                  {insert_scripts files='fullAvatar/scripts/swfobject.js,fullAvatar/scripts/fullAvatarEditor.js'}--------引入脚本
    
                                   <p id="swfContainer">
    
                                      本组件需要安装Flash Player后才可使用，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。
    
                                   </p>
    
                                   <script type="text/javascript">
    
                              swfobject.addDomLoadEvent(function () {
    
                                        var swf = new fullAvatarEditor("js/fullAvatar/fullAvatarEditor.swf", "js/fullAvatar/expressInstall.swf", "swfContainer", {
    
                                                  id : 'swf',
    
                                                    upload_url : 'user.php?act=do_avatar&userid={$uid}', //上传接口
    
                                                    method : 'post',  //传递到上传接口中的查询参数的提交方式。更改该值时，请注意更改上传接口中的查询参数的接收方式
    
                                                    src_upload : 2,         //是否上传原图片的选项，有以下值：0-不上传；1-上传；2-显示复选框由用户选择
    
                                                    avatar_box_border_width : 0,
    
                                                    avatar_sizes : '100*100|50*50|32*32',
    
                                                    avatar_sizes_desc : '100*100像素|50*50像素|32*32像素'
    
                                              }, 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为：\n" +　msg.content.sourceUrl+"\n\n" + "头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n\n")+"\n\n传递的userid="+msg.content.userid+"&username="+msg.content.username);
    
                                                                    }
    
                                                                    else
    
                                                                    {
    
                                                                          alert("头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n\n")+"\n\n传递的userid="+msg.content.userid+"&username="+msg.content.username);
    
                                                                    }
    
                                                               }
    
                                                         break;
    
                                                    }
                                              }
                                        );
                              });
                          </script>
                  </td>
                          </tr>
                             </table>

**4：将你下载的插件的文件夹放在js文件**

**5：在用户头像下面在写一个elseif语句，（文件上传时所用方法）**

**![Center 4][]**

/*文件上传是所用方法*/
    elseif($action== 'do_avatar')
    {
        $result = array();
        $result['success'] = false;
        $success_num = 0;
        $msg = '';
        //上传目录
        $dir = dirname(__FILE__)."\images\avatar";
          // 取服务器时间+8位随机码作为部分文件名，确保文件名无重复。
          $filename = date("YmdHis").'_'.floor(microtime() * 1000).'_'.createRandomCode(8);
          //upload_url中传递的额外的参数，如果定义的method为get请换为$_GET
          $result["userid"] = $_POST["userid"];
          $result["username"]     = $_POST["username"];
          // 处理原始图片开始------------------------------------------------------------------------>
          //默认的 file 域名称是__source，可在插件配置参数中自定义。参数名：src_field_name
          $source_pic = $_FILES["__source"];
          //如果在插件中定义可以上传原始图片的话，可在此处理，否则可以忽略。
          if ($source_pic)
          {
    
              if ( $source_pic['error'] > 0 )
              {
                  $msg .= $source_pic['error'];
              }
              else
              {
    
                  //原始图片的文件名，如果是本地或网络图片为原始文件名、如果是摄像头拍照则为 *FromWebcam.jpg
                  $sourceFileName = $source_pic["name"];
                  //原始文件的扩展名(不包含“.”)
                  $sourceExtendName = substr($sourceFileName, strripos($sourceFileName, "."));
                  //保存路径
                  $savePath = "$dir\php_source_$filename.".$sourceExtendName;
                  //当前头像基于原图的初始化参数（只有上传原图时才会发送该数据，且发送的方式为POST），用于修改头像时保证界面的视图跟保存头像时一致，提升用户体验度。
                  //修改头像时设置默认加载的原图url为当前原图url+该参数即可，可直接附加到原图url中储存，不影响图片呈现。
                  $init_params = $_POST["__initParams"];
                  $result['sourceUrl'] = toVirtualPath($savePath).$init_params;
                  move_uploaded_file($source_pic["tmp_name"], $savePath);
                  $success_num++;
              }
          }
          //<------------------------------------------------------------------------处理原始图片结束
          // 处理头像图片开始------------------------------------------------------------------------>
          //头像图片(file 域的名称：__avatar1,2,3...)。
          $avatars = array("__avatar1", "__avatar2", "__avatar3");
          $avatars_length = count($avatars);
          for ( $i = 0; $i < $avatars_length; $i++ )
    
          {
              $avatar = $_FILES[$avatars[$i]];
              $avatar_number = $i + 1;
              if ( $avatar['error'] > 0 )
              {
                  $msg .= $avatar['error'];
              }
              else
              {
                  $savePath = "$dir\php_avatar" . $avatar_number . "_".$result["userid"].".jpg";
                     $result['avatarUrls'][$i] = toVirtualPath($savePath);
                     move_uploaded_file($avatar["tmp_name"], $savePath);
                     $success_num++;
               }
          }
          //<------------------------------------------------------------------------处理头像图片结束
          $result['msg'] = $msg;
          if ($success_num > 0)
          {
              $result['success'] = true;
          }
          //返回图片的保存结果（返回内容为json字符串）
          print json_encode($result);
          //$smarty->display('user_transaction.dwt');
    }

6：**将下面的代码放入user.php最后面（两个自定义函数）**

/**************************************************************
    *  生成指定长度的随机码。
    *  @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;
          }
    /**************************************************************
    *  将物理路径转为虚拟路径。
    *  @param string $physicalPpath 物理路径。
    *  @access public
    **************************************************************/
          function toVirtualPath($physicalPpath)
          {
               $virtualPath = str_replace($_SERVER['DOCUMENT_ROOT'], "", $physicalPpath);
               $virtualPath = str_replace("\\", "/", $virtualPath);
                       return $virtualPath;
          }

**7：在images中新建一个文件夹以便于存放图片**

**![Center 5][]**

8：**将登陆用户的id传到user.php中**

$smarty->assign('uid',$user\_id);

![Center 6][]

9：**在user\_menu.lib中插入一个img标签，用来显示当前登录人的会员头像**

![Center 7][]

10.到此完毕

[Center]: /images/20220722/7b21c548c9294724b9d7c75900a3c1c1.png
[Center 1]: /images/20220722/52b24a2ee3e34b72abfb7abde6a607d6.png
[Center 2]: /images/20220722/1b39a616ba3a4281b7cf4a0a26d5ad13.png
[Center 3]: /images/20220722/756e4e5509744ca8b900b1256ed69419.png
[Center 4]: /images/20220722/0fefd2c27d57447ca841d0b1a1606ef4.png
[Center 5]: /images/20220722/c63ede87cc7a46dd8a7a00864e327801.png
[Center 6]: /images/20220722/9aac0ccdc7e14e68a22febe6833ddb80.png
[Center 7]: /images/20220722/fe0c48bf89bf471294263c4665cbd7ed.png