最近做项目,要用到头像上传,自己试了两种插件,比如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文档都找不到了,有些参数也没办法知道他是什么意思。
我觉得这个插件也不算特别好,希望大家有好的插件可以推荐个给我啦,谢谢大家
源代码,等我整理好会分享给大家哒,哈哈