《支持剪裁截图、旋转、生成缩略图等多功能头像上传插件fullAvatarEditor》要点：
本文介绍了支持剪裁截图、旋转、生成缩略图等多功能头像上传插件fullAvatarEditor，希望对您有用。如果有疑问，可以联系我们。
相关主题：JS、Jquery插件 / 文件图片上传插件
fullAvatarEditor 该flash头像上传插件受众多开发人员好评的优秀，具有以下优势：
下面是一个用法示例：
本篇来源于网络，具体用法建议参考：http://www.jb51.cc/jiaocheng/106.html
HTML：
首先我们在页面上定义了一个隐藏的上传按钮。为什么要隐藏呢？这是为了保证图片成功加载到编辑面板。
<button type="button" id="upload" style="display:none;margin-top:8px;"> swf外定义的上传按钮，点击可执行上传保存操作 </button>
接着我们要载入jQuery库和flash需要的组件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript" src="scripts/fullAvatarEditor.js"></script>
swfobject.addDomLoadEvent(function() {
//以下两行代码正式环境下请删除
if (location.href.indexOf('http://') == -1) alert('请于WEB服务器环境中查看、测试！\n\n既 http://*/simpleDemo.html\n\n而不是本地路径 file:///*/simpleDemo.html的方式');
var swf = new fullAvatarEditor("fullAvatarEditor.swf", "expressInstall.swf", "swfContainer", {
id: 'swf',
upload_url: 'upload.PHP?userid=999&username=looselive',//上传头像地址和参数
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) { //msg.content是服务端返回的JSON值
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;
}
});
document.getElementById("upload").onclick = function() {
swf.call("upload");
};
});PHP部分：
本文以PHP上传为例，我们把头像上传到upload文件夹，并且上传后生成了三张头像缩略图。
#print_r(urlParse($s)); $dir = "upload"; // 取服务器时间+8位随机码作为部分文件名，确保文件名无重复。 $filename = date("YmdHis") . '_' . floor(microtime() * 1000) . '_' . createRandomCode(8); // 处理原始图片开始------------------------------------------------------------------------> //默认的 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++; } }
