插件介绍
开发中经常需要给用户上传头像功能，简单的操作就直接让用户选择头像图片直接上传了，这样做虽然简单但功能不够强大、用户体验非常差。如果能上传图片实时预览并且能对头像图片尺寸调整和剪切就好了，可惜这样的插件着实不多。今天我给大家推荐一个具有以上功能的JQuery插件：富头像上传编辑器。
富头像上传编辑器具有以下特点：
- 小巧的身材
- 漂亮的外观
- 强大的功能
- 丰富的接口
- 跨平台
- 兼容极致的体验
- 支持摄像头拍照
通过测试感觉该插件还是非常不错的，功能挺强大的、外观方面也还行、兼容性也还可以。
功能介绍
官方给出了2中外观样式：
1、内置选项卡、按钮、复选框演示
2、自定义选项卡、按钮、复选框
演示及下载
简单代码演示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Simple demo</title> <script type="text/javascript" src="/scripts/swfobject.js"></script> <script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script> </head> <body> <div style="width:800px;margin: 0 auto;"> <h1 style="text-align:center">富头像上传编辑器演示</h1> <div> <p id="swfContainer"> 本组件需要安装Flash Player后才可使用，请从 <a href="http://www.adobe.com/go/getflashplayer">这里</a> 下载安装。 </p> </div> <button type="button" id="upload">自定义上传按钮</button> </div> <script type="text/javascript"> swfobject.addDomLoadEvent(function () { var swf = new fullAvatarEditor("fullAvatarEditor.swf", "expressInstall.swf", "swfContainer", { id : "swf", upload_url : "/upload.php?userid=999&username=looselive", method : "post", src_url : "/samplePictures/Default.jpg", src_upload : 2 }, function (msg) { switch(msg.code) { case 1 : alert("页面成功加载了组件！");break; case 2 : alert("已成功加载图片到编辑面板。");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); } alert("头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n")); } break; } } ); document.getElementById("upload").onclick=function(){ swf.call("upload"); }; }); </script> </body> </html> |
具体的详细使用方法请查看官方文档。
发布者：柚子，转转请注明出处：https://ityouzi.com/archives/jquery-fullavatareditor.html
微信扫一扫 
支付宝扫一扫 