在开发过程中，我们会用到头像上传的功能。这里给大家推荐一款比较流行的头像上传组件，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为：\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>