uplodify 结合 imgareaselect 实现头像截图上传

只要你付出比别人更多一点点，你会成功的。

jquery + uploadify 实现图片异步上传。（主要用于个人中心的会员头像的剪切上传）

首先下载uploadify和imgareaselect插件。首先加载jq库和upload插件js和imgareaselect插件（要先引入jq库）。

先实现图片上传 首先用

        <form>
            <input type="file" name="fupload" id="fupload" multiple="true">  //multiple 实现多张图片上传
        </form>

<script type="text/javascript">
        $(function(){
            $("#fupload").uploadify({
                'debug'        : true,                              //开启调试
                'fileObjName'  : 'file',                        //定义在php文件中接受的键值 $_get['file'];
                'fileTypeExts' : '*.jpg; *.png; *.gif',    //选择图片时js允许上传的图片类型
                'buttonText'   : '上传图片',                  //在按钮上显示的字
                'swf'             : '__PUBLIC__/uploadify/uploadify.swf',  //上传图片的swf
                'uploader'     : '__URL__/upload',      //指定当前php控制器中的方法
                'onUploadSuccess'  : function(file,data,response){  //上传成功处理函数
                    var data = parseJSON(data);        //获取json数据
                    if(response){  //如果上传成功
                        $("#crop").children('img').attr('src','__ROOT__/Public/uploads                           /'+data.name+'?random'+Math.random());      //添加到img标签中 用于显示上传之后的图片和imgareaselect剪切用
                    }else{
                        alet(data.error);
                    }
                    
                }
            });
        });
    </script>

uploadify在线手册地址 ：http://www.yauld.cn/uploadifydoc/

imgareaselect 参考地址：http://www.jb51.net/article/28485.htm

之后在php中进行文件上传即可。

php上传处理方法代码：

/**
     *上传处理   
     */
    public function upload(){
        $rst=array();                           //用于返回结果给前台
        $file=$_FILES['file'];           //接收uploadify中的file键值
        $name=$file['name'];             //获取上传文件名
        $tmp=$file['tmp_name'];      //内存缓存中的名字（暂时）
        $type=$file['type'];              //文件的类型
        $size=$file['size'];               //文件大小
        $suffix=end(explode('.',$name)); //获取文件的后缀
        $path='Public/uploads/';       //文件上传路径  从根目录开始
        
        //允许通过的文件类型
        $allow_type=array('png','jpg','gif','jpeg','ico');
        if(in_array($suffix,$allow_type) && $size<10000000){  //限定文件大小
          
            $name = 'frank'.date('his').rand(0,100).'.'.$suffix;      //重新定义文件名
            $save_info = move_uploaded_file($tmp,$path.$name); //文件上传 move_uploaded_file看php手册
            if($save_info){
                $rst['success'] = '上传成功';
                $rst['name'] = $name;
            }else{
                $rst['error']='文件上传失败';
            }
        }else{
            $rst['error']='只能上传png,jpg,gif,jpeg,ico格式的图片 或者是文件过大';
        }
        echo json_encode($rst);   //通过json方式返回信息给前台做处理
    }

imgareaselect 插件的使用。参考地址：http://www.jb51.net/article/28485.htm；

imgareaselect 获取到图片（crop图片），同时把图片信息赋给预览图  之后配置各个选项（如：显示比例等）之后在选择的之后动态分配给预览图高、宽 左边距和上边距 通过css来控制显示在预览图中的效果，代码如下:

function Preview(coords){//coords  是选择时候剪切的图像对象  可以获取信息
            //  剪切图片的宽高
            var img_width = $('#cropbox').width();
            var img_height = $('#cropbox').height();
              //根据包裹的容器宽高,设置被除数
              var rx = 100 / coords.w;
              var ry = 100 / coords.h;
              $('#crop-preview-100').css({
                width: Math.round(rx * img_width) + 'px',
                height: Math.round(ry * img_height) + 'px',
                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                marginTop: '-' + Math.round(ry * coords.y) + 'px'
              });

} 

。当选择结束之后把具体的参数（左上角的x坐标，左上角的y坐标，需要剪裁的宽和高）如下代码：

onSelectEnd: function (c){    //选择结束时动态赋值，该值是最终传给程序的参数！
                        $('#x').val(c.x);//需裁剪的左上角X轴坐标
                        $('#y').val(c.y);//需裁剪的左上角Y轴坐标
                        $('#w').val(c.w);//需裁剪的宽度
                        $('#h').val(c.h);//需裁剪的高度
                  }

获取到input当中提交给后台php，之后php来真正的实现截图。