Yii2.0 集成使用富头像上传编辑器
在开发过程中,我们会用到头像上传的功能。这里给大家推荐一款比较流行的头像上传组件,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>
Yii2.0 集成使用富头像上传编辑器的更多相关文章
- js实现裁剪头像上传编辑器
插件: 1.富头像上传编辑器是一款支持本地上传.预览.视频拍照和网络加载的flash头像编辑上传插件,可缩放.裁剪.旋转.定位和调色等. http://www.fullavatareditor.com ...
- 使用jquery插件uploadfive、jcrop实现头像上传
1.html页面部分代码:(实现选着图片时,jcrop能够刷新图片) <script type="text/javascript"> $(function(){ $(& ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
- PHP+ajaxfileupload与jcrop插件结合 完成头像上传
昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果
- struts 头像上传
java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- Canvas处理头像上传
未分类 最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到 ...
随机推荐
- windows平台下新网络库RIO ( Winsock high-speed networking Registered I/O)
What's New for Windows Sockets Microsoft Windows 8 and Windows Server 2012 introduce new Windows Soc ...
- hadoop学习笔记411
安装hadoop 1. 免秘钥 使用hadoop用户 ssh-keygen -t rsa cp id_rsa.pub authorized_keys cat id_rsa.pub>&g ...
- Power OFF and ON USB device in linux (ubuntu)
Power OFF and ON USB device in linux (ubuntu) http://loginroot.com/power-off-and-on-usb-device-in-li ...
- URL辅助方法
URL辅助方法则负责用来产生url地址,那什么时候需要呢,以输出超链接来说,使用Html.ActionLink()辅助方法一定会产生超链接的a标签,如果只是想单纯的输出asp.net mvc的某个网址 ...
- [Xcode 实际操作]七、文件与数据-(10)NSkeyedArchiver存储和解析数据,Swift对象的归档和恢复归档
目录:[Swift]Xcode实际操作 本文将演示如何使用归档的方法,对模型对象进行持久化工作. 在项目名称上点击鼠标右键,弹出右键菜单,选择[New File]新建文件命令, 在弹出的模板选项窗口中 ...
- wamp的HTTPS配置
1.需要去申请ssl证书 2.打开wamp的apache的配置文件:httpd.conf 找到 LoadModule ssl_module modules/mod_ssl.so Include con ...
- SpringBoot2.0 基础案例(10):整合Mybatis框架,集成分页助手插件
一.Mybatis框架 1.mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获 ...
- MySQL server has gone away和Maximum execution time of 120 seconds exceeded
今天在写采集时碰到两个问题1.MySQL server has gone away2.Maximum execution time of 120 seconds exceeded 采集程序写好运行大概 ...
- mysql5.7安装部署后初始密码查看以及修改
一.查看初始密码以下两种方法: 1.找到自己的error.log日志文件,执行自己的命令,红色标记的部分为初始化密码. grep 'temporary password' /data/mysql/er ...
- LOJ 2288「THUWC 2017」大葱的神力
LOJ 2288「THUWC 2017」大葱的神力 Link Solution 比较水的提交答案题了吧 第一个点爆搜 第二个点爆搜+剪枝,我的剪枝就是先算出 \(mx[i]\) 表示选取第 \(i \ ...