thinkphp3.2.3富头像上传编辑器
来源:互联网 发布:小米4手机没有3g网络 编辑:程序博客网 时间:2024/03/28 23:18
最近做项目,要用到头像上传,自己试了两种插件,比如jquery的uploadify和富头像编辑器。但是觉得富头像插件可能比uploadify好一点,但是自己还是调试了好久,废话不多说,上代码,说说我所遇到的问题(其实就是自己没有看文档)
效果图
点击上传图片后
我想要的效果就是,当我上传成功,并存到数据库成功后,第一张图就能够异步无刷新的变成右边这两张图。
并且左边菜单栏的圆圈的图片也能无刷新的异步成新的头像,其实这是涉及到了js的问题,后面会说到。
用到这个插件,首先我们就要了解它,我们需要准备这些东西
<!-路径因项目而异要用的话可能就要改,我是放在项目的同级目录Public的子目录Uploadify里,但是后面的swfobject.js,fullAvatarEditor.js是必须的---> <script src="__PUBLIC__/admin_js/jquery.min.js?v=2.1.4"></script> <script type="text/javascript" src="__PUBLIC__/Uploadify/swfobject.js"></script> <script type="text/javascript" src="__PUBLIC__/Uploadify/fullAvatarEditor.js"></script>
现在开始上代码!!!
html代码
<div class="form-group"> <label class="col-sm-1 control-label">当前头像:</label> <img class="col-sm-3" src='' id='cur_img' width='350px' height='300px'> <div class='col-sm-8'> <p id="swfContainer"> 本组件需要安装Flash Player后才可使用,请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。 </p> </div> </div>
因为重点问题还是出在了js代码上,最后会细述,其实就是这个插件的一些参数问题,先上php代码
Thinkphp代码
public function uploadImg(){ $model=M('admin_user'); $where['username']=session("username"); if (IS_POST) { header('Content-Type: text/html; charset=utf-8'); $result = array(); $username=I('username'); $msg = ''; //上传目录 $path='avatar/'; // 取服务器时间+8位随机码作为部分文件名,确保文件名无重复。 $filename = date("YmdHis").'_'.floor(microtime() * 1000).'_'.createRandomCode(8); //如果文件存在,就删除原文件 /* if (file_exists($path)) { delDir($path); } $avatars = array("__avatar1"); $avatar = $_FILES[$avatars['0']]; if ($avatar['error'] > 0 ){ $msg .= $avatar['error']; } //如果文件不存在,创建文件 if(!file_exists($path)){ makeDir($path); }*/ $avatars = array("__avatar1"); $avatar = $_FILES[$avatars['0']]; if ($avatar['error'] > 0 ){ $msg .= $avatar['error']; } makeDir($path); $savePath = $path . $filename . ".jpg"; if(move_uploaded_file($avatar["tmp_name"], $savePath)){ //将图片存到数据库 $res=$model-> where($where)->setField('image_path',$savePath); if($res===false){ $result['success'] = false; }else{ //将数组$result封装成json数据,传到前端 $result['msg'] = $msg; $result['success'] = true; $result['img']=$savePath; } echo json_encode($result); }else{ $result['success'] = false; } } }
注意!这段代码中用到的几个方法(makeDirD($path)、delDir($path)、createRandomCode($length))!!!,写在了function.php(Application/common/common/function.php)中
function.php
<?php/** * 功能:检测一个目录是否存在,不存在则创建它 * @param string $path 待检测的目录 * @return boolean */function makeDir($path) { return is_dir($path) or (makeDir(dirname($path)) and @mkdir($path, 0777));}/** * 功能:检测一个目录是否存在,存在则删除它 * @param string $path 待检测的目录 * @return boolean */function delDir($path) { if(is_file($path)){ unlink($path); return; } $handle=opendir($path); while($filename=readdir($handle)){ if($filename=='.' ||$filename=='..'){ continue; } $new_path=$path.'/'.$filename; if(is_dir($new_path)){ del_dir($new_path); } if(is_file($new_path)){ unlink($new_path); } } closedir($handle); rmdir($path);}/*************************************************************** 生成指定长度的随机码。* @param int $length 随机码的长度。* @access public**************************************************************/function createRandomCode($length){ $randomCode = ""; $randomChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; for ($i = 0; $i < $length; $i++) { $randomCode .= $randomChars { mt_rand(0, 35) }; } return $randomCode;}?>
js代码(这是我们需要去好好了解这个插件的地方,不了解的话,就不知道怎么用了,怎么去改人家的代码)
该插件需要正式环境(就是必须在服务器环境才能使用,如apache、tomact等环境下才可以,在本地,像浏览自己写好的静态html页面那样是不行的)
//头像上传 插件 swfobject.addDomLoadEvent(function () { //以下两行代码正式环境下请删除 if(location.href.indexOf('http://') == -1) 5alert('请于WEB服务器环境中查看、测试!\n\n既 http://*/simpleDemo.html\n\n而不是本地路径 file:///*/simpleDemo.html的方式'); var swf = new fullAvatarEditor("__PUBLIC__/Uploadify/fullAvatarEditor.swf", "__PUBLIC__/Uploadify/expressInstall.swf", "swfContainer", { id : 'swf', upload_url : "{:U('User/uploadImg')}", //上传接口 method : 'get', //传递到上传接口中的查询参数的提交方式。更改该值时,请注意更改上传接口中的查询参数的接收方式 src_upload : 2, //是否上传原图片的选项,有以下值:0-不上传;1-上传;2-显示复选框由用户选择 avatar_box_border_width : 0, tab_visible: false,//是否显示选项卡* avatar_sizes : '200*250',// avatar_sizes_desc : '200*250', avatar_tools_visible : false, checkbox_visible : false }, 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: //alert(msg.type); if(msg.type==0){ alert('操作成功!'); document.getElementById("cur_img").src="__ROOT__/Uploads"+msg.content.img;//获取到上传的图片路径 $('#adminImg', window.parent.document).attr('src',"__ROOT__/"+msg.content.img);//修改左侧菜单栏的头像 } } } ); });
首先来讲一下这个插件的调用方法,
new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);
1.swfContainerID是包裹这个插件的HTML标签,在我的代码中,用的是p标签。这个参数是必须的
2.其次最重要的是这个[callback]回调函数,注意这个回调函数是flash执行某些操作时的回调函数!我先前误认为是上传成功后 的回调函数,其实并不是。
3.在php代码中,我们看到是$result封装成json数据,js代码中的回调函数是function(msg),那他的内容是什么呢,我们来执行代码,看一下结果
所以我们就要搞明白function(msg){
switch(msg.code){
case 1:.....;break;
case 2:.....;break;
case 5:if(msg.type==0){
alert(msg.content.xxxx);
}break;
}
}
是什么意思,不看文档还真TM不知道是啥!!!上传成功后的又要怎么写一些我想要的js代码?!!!
还好http://www.bubuko.com/infodetail-413642.html这篇文章有一丢丢用!
callback 回调函数
执行该函数时,函数中的this关键字指向表示swf的HTMLObjectElement,并且会给函数传递一个表示事件消息的json对象作为参数。
json对象的属性如下:
code : Number主要用来辨识消息的具体来源和内容,以便客户端知道如何处理。
type : Number0 表示成功,1 表示警告,2 表示错误,3 表示异常。
content : *表示消息的内容
所以,在msg.code=5,又当msg.type=0时,我们就知道图片上传成功,因此我们还可以获得json格式的$result的内容,比如'msg','path','success'
var src=msg.content.path;//获取保存图片的路径
而不是像我们以前写的那样。。。
msg.img;var obj=eval("("+msg+")");obj.msg.img;/*因为它是插件!!所以获取内容的方式还得跟着他的文档来。。。*/
最后说说为啥我不用uploadify吧,虽然uploadify虽然比较好上手(个人觉得富头像可能复杂一点。可能是我不会用,还有一个原因是现在富头像的官网找不到了,我看不了他的API文档),但是uploadify的兼容性十分不好,毕竟他自己官网上的demo有的时候我都不能用,更别说自己写了用了,他的flash插件加载不进来,有的时候上传按钮的样式不是uploadify所带的样式,有的时候点击上传按钮,他还弹不出来文件选择框。我也是很崩溃的。之前之所以不用富头像文本是因为它的选项卡我嫌太丑了,又不知道怎么改,后来查了一些相关信息,才知道可以不显示选项卡,还有获取它返回的json数据的内容也是一样的,奈何现在能查到的富头像上传API文档都找不到了,有些参数也没办法知道他是什么意思。
我觉得这个插件也不算特别好,希望大家有好的插件可以推荐个给我啦,谢谢大家
源代码,等我整理好会分享给大家哒,哈哈
阅读全文
0 0
- thinkphp3.2.3富头像上传编辑器
- 富头像上传编辑器
- fullAvatarEditor富头像上传编辑器
- fullavatareditor 富头像上传编辑器
- 富头像上传编辑器(flash头像上传插件)
- 超强大的富头像上传编辑器
- 富头像编辑器的使用
- 关于富头像上传的使用方法
- thinkphp3.2头像上传即时显示并截取
- 富文本编辑+fs操作文件+Buffer练习(头像上传功能)
- 富文本编辑器上传图片的问题
- 百度富文本框编辑器不能上传图片
- 百度Ueditor富文本编辑器上传图片
- thinkphp3.2.3图片上传类
- Ueditor富文本编辑器--上传图片自定义上传操作
- ThinkPHP3.2.3集成xheditor上传图片
- Thinkphp3.2.3 ----后台----图片上传相应处理
- ThinkPHP3.2.3,PHPExcel上传文件…
- SGX相关资源
- 程序员面试金典:找出缺失的整数、碰撞的蚂蚁
- QT 3D模块的数量限制
- 线程池和连接池的区别
- 《渡荆门送别》&《旅夜书怀》
- thinkphp3.2.3富头像上传编辑器
- [BZOJ]4241 历史研究 回滚莫队
- 程序员面试金典:奇偶位交换、判断直线相交
- 小希的迷宫 HDU
- [日常训练] 最小生成树
- 坐标系之间的转换
- 动态规划--分组背包--hdu4341 Gold miner
- Java四种线程池的使用
- 连续自然数的阶乘求和
原创粉丝点击
热门IT博客
热门问题
老师的惩罚
人脸识别
我在镇武司摸鱼那些年
重生之率土为王
我在大康的咸鱼生活
盘龙之生命进化
天生仙种
凡人之先天五行
春回大明朝
姑娘不必设防,我是瞎子
怎么申请网店
怎么样开网店流程
开网店的优势
怎么申请开网店
京东网店怎么开
手把手教你开网店
怎么开京东网店
网店怎么开要多少本钱
想开个网店怎么找货源
免费开网店的平台
怎么自己开网店
开网店做什么好
开个网店需要什么手续
在家开网店怎么开
如果开网店
如何在家开网店
怎样免费开网店
怎样开个网店
怎样自己开网店
开网店好吗
咋样开网店
咋开网店
怎样开一家网店
如何经营好网店
开个什么网店好
开网店需要哪些条件
如何用手机开网店
如何自己开网店
在家开网店卖什么好
开网店要不要钱
现在开网店要多少钱
开怎么开网店
网店怎么开呢
开网店需要
怎样用手机开网店
怎么去开网店
怎么开网店呀
开网店需要啥
网店开什么
我的网店
开网店在哪里开好