在开发过程中，我们会用到头像上传的功能。这里给大家推荐一款比较流行的头像上传组件，FullAvatarEditor 2.3（富头像上传编辑器）。
实际效果如图所示：
1.下载组件，下载地址：；
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="">这里</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为：\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 {// 上传成功后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>