php使用uploadify上传头像

     上传文件有一个不错的插件uploadify,这个使用起来还是很方便的，刚刚做了一下上传头像的功能，只需要把uploadify插件下载下来，引入进文件就行了，文件截图：

文件很多但是需要使用到的文件只有jquery.uploadify.min.js，uploadify.css只需要把这两个文件在需要的页面引入就行了，当然别忘了引入jquery.js

下面开始配置：

<script type="text/javascript">
    // 上传文件的配置
    $('#face').uploadify({
        swf : '__PUBLIC__/static/uploadify/uploadify.swf',
        // uploader  代表上传的地址
        uploader : '{:U("member/upface")}',
        buttonText : '上传头像',
        fileTypeDesc : 'Images File',
        // 限制上传文件类型
        fileTypeExts : '*.jpg;*.png;*.gif;,*.jpeg',
        onUploadSuccess : function(file,data,response) {}
});
</script>

配置完成

开始在控制器里面建立上面那个upface方法

// 上传头像
public function upface() {
    $uploadPath = $this->_uppic();
    $this->ajaxReturn($uploadPath);
}

使用 _uppic方法处理图片：

// 图片处理
private function _uppic() {
    if($_FILES['Filedata']['tmp_name']) {
        // 图片上传
        $upload = new \Think\Upload();
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->savePath  =      './Uploads/avatar/'; // 设置附件上传（子）目录
        $upload->rootPath  =      './'; // 设置附件上传根目录
        $info = $upload->upload();
        if($info) {
            // 原图路径
            $originFilePath = $info['Filedata']['savepath'].$info['Filedata']['savename'];
            // 大图路径
            $maxPath = $info['Filedata']['savepath'].'max_'.$info['Filedata']['savename'];
            // 中等图路径
            $mediumPath = $info['Filedata']['savepath'].'medium_'.$info['Filedata']['savename'];
            // 小图路径
            $smallPath = $info['Filedata']['savepath'].'small_'.$info['Filedata']['savename'];

            // 生成缩略图
            $image = new \Think\Image();
            $image->open($originFilePath);
            // 生成三张缩略图
            $image->thumb(180,180)->save($maxPath);
            $image->thumb(80,80)->save($mediumPath);
            $image->thumb(50,50)->save($smallPath);

            // 删除原图
            unlink($originFilePath);

            return array(
                'status' => 1,
                'msg' => '头像上传成功',
                'path' => array(
                    'max' => $maxPath,
                    'medium' => $mediumPath,
                    'small' => $smallPath,
                ),
            );
        }else {
            return array('status' => 0,'msg' => $upload->getError());
        }
    }
}

在回来看刚刚配置中的那个上传成功的方法：

onUploadSuccess : function(file,data,response) {
    var data = eval('('+data+')');
    if(data.status) {
        // 发送ajax请求,将图片路径写入数据表
        $.post('{:U("member/setface")}',{small:data.path.small,medium:data.path.medium,max:data.path.max},function(dat) {
            if(dat.status) {
                $('#faceimg').attr('src','{$Think.const.SITE_URL}'+data.path.max);
                alert(dat.msg);
            }else {
                alert(dat.msg);
            }
        },"json");
    }else {
        alert(data.msg);
    }
}

根据_uppic返回的值表示图片已经处理好，下面需要把图片的路径写入数据表中（使用ajax），

$.post('{:U("member/setface")}',{small:data.path.small,medium:data.path.medium,max:data.path.max},function(dat) {
    if(dat.status) {
        $('#faceimg').attr('src','{$Think.const.SITE_URL}'+data.path.max);
        alert(dat.msg);
    }else {
        alert(dat.msg);
    }
},"json");

然后在控制器里面建立setface方法：

// 将上传图片路径写入数据表
public function setface() {
    $userinfo = D('Userinfo');
    $uid = session('userid');
    $where = array('uid'=>$uid);

    $data['face50'] = I('small');
    $data['face80'] = I('medium');
    $data['face180'] = I('max');
    $updateStatus = $userinfo->where($where)->save($data);
    if($updateStatus !== false) {
        $arr['status'] = 1;
        $arr['msg'] = '上传成功';
        $this->ajaxReturn($arr);
    }else {
        $arr['status'] = 0;
        $arr['msg'] = '上传失败';
        $this->ajaxReturn($arr);
    }
}

ok,整体就是这个思路