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

来源：互联网发布：云南广电网络营业厅编辑：程序博客网时间：2024/05/02 04:48

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

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

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

先实现图片上传首先用

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

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来真正的实现截图。

0 0