用户直接上传图片，点击\"上传\"按钮之后，在图片预览图内可预览图片，然后进行图片的裁剪前预览，当点击\"裁剪\"按钮时确定裁剪图片，并在\"裁剪结果\"区域显示裁剪后的效果。
（说明：我是将上传文件保存在\"/uploads\"文件夹中，而截图结果放在\"/avatar\"文件夹里） 实现效果预览：
二、解决方案 1、插件的选择
jQuery：这个是必备的一个插件可以到官网上下载
http://docs.jquery.com/Downloading_jQuery
imgAreSselect:这个是实现客户端上图片区域选择的
http://odyniec.net/projects/imgareaselect/
uploadify：实现文件的上传的功能，支持多文件上传，且可定制性非常强。
http://www.uploadify.com/download/
上面的插件是用在客户端上，其实在我这个程序里写PHP时也用了一些插件。其实我之所以写\"图像剪裁上传\"的起源是因为我看了《PHP快速开发工具箱》想自己练习一下的。该书是有一个网址（http://www.pluginphp.com/），里面有整本书的代码，而且每个插件都相应的demo，非常不错。下面是用到的PHP插件：
PIPHP_UploadFile.php：这是一个文件上传功能的php文件
http://www.pluginphp.com/plug-in11.php
PIPHP_ImageCrop.php：这个php文件是具有对图片进行裁剪的功能
http://www.pluginphp.com/plug-in15.php
2、客户端与服务器之间的交互图
1
为了便于理解，我先把交互图放在这里。其中绿色部分是客户端的主要步骤、粉红色是服务器端的主要步骤，服务器与客户端之间的交互通过AJAX完成。可以发现，大部分的操作在客户端进行，服务器端与客户端之间的交流只是简单的JSON数据，因此这样给用户的体验是非常高的。
2
3
截图 1 客户端与服务器之间交互图
3、客户端文件
展示给用户的是html页面，为了学习并巩固CSS知识，就和DIV+CSS搭建了下面这样一个前台页面，见截图 2。
截图 2 前台页面
跟客户端有关的文件主要是一个index.html，而在这个文件里面会引用其他的插件文件，因此可以说，客户端方面只有一个html文件。
另外，由于这里主要讨论客户端与浏览器之间的交互，因此略过CSS方面的内容。这里只列出HTML的代码，首先是
部分：4
href=\"/imgareaselect/css/imgareaselect-default.css\" />
可以看得出来主要是引用一些插件的文件。上面的文件（包括CSS文件与js文件）都可以从我给的链接里下载到，只是样式表layout.css是我自己写的样式表，大家可以根据自己的CSS知识写出。
接下来是body部分，也许这么看代码比较乱，推荐使用一些带有高亮显示的工具来查看这些代码，比如DreamWeaver等IDE，实在不行，也可以用火狐的\"查看源代码\"来看。（火狐不仅是一个好浏览器，更是一个极棒的调试器！） 为了方便起见，我去掉诸如\"导航条\"、页脚版权声明等点缀部分，只给出必要的html代码。
6
上面我用颜色区分开主要DIV区，这三块分别代表\"上传图片区\"、\"大图展示区\"、\"截图结果区\"与\"选择预览区\"。其中三个粗体部分是带有ID属性的空DIV，用来放图片用的。（到时时候动态加载图片到这些DIV中），因此这段代码形成的HTML框架如截图 2所示。（蓝色线条是block元素边界，此效果较是由火狐的插件制作而成）：
截图 3 页面大体框架
基本的准备工作已经完成，待会儿再继续在这个框架上添加代码。咱们先介绍一下服务器上的PHP是怎么个情况。 4、服务器文件
服务器上主要用到两个PHP文件，一个用来处理上传图片的process.php，另外一个则是处理图片截图用的crop.php。不过，process.php文件包括插件
PIPHP_UploadFile.php，而crop.php中包括PIPHP_ImageCrop.php插件。（这些插件的地址我在上面已经给出了）
7
＝＝＝＝＝＝＝
process.php主要接收上传图片，设置限制（比如文件的大小与格式），处理一些上传错误等，最后返回给客户端JSON，里面包含了所上传文件的一些信息（比如路径、大小等）；当在客户端点击\"上传\"按钮的时候，会用异步（AJAX）的方式调用这个php文件。 ＝＝＝＝＝＝＝
crop.php主要负责真正裁剪上传的图片，当在客户端返回裁剪的位置后（点击\"裁剪\"按钮后），以异步方式将数据以JSON的方式传递给服务器，crop.php真正裁剪图片后，将图片另存到网络的目录下，同时返回此图片的存储路径，然后再让客户端显示图片即可 三、用到的技术摘要
现在根据上面的交互图继续完善代码。因此我这节会交叉地完善html、js与php代码，并不会单独分开完善，这样在逻辑上会更好理解。 声明：新增的代码部分用粗体表示 １、uploadify上传
在html的head部分加入 …
上面的代码只是uploadify这一个插件的配置项而已。为了增强用户体验可以详细配置其他选项，这参考这个插件的官方文档：
http://www.uploadify.com/documentation/。上面的'script'选项就是选择服务器的处理脚本，我们这里就使用process.php了。上传文件到服务器后会让服务器自动调用这个程序。那么客户端怎么知道服务器的process.php调用完了呢？如何获取process.php反馈回来的信息呢？——其实uploadify它提供了一个\"触发\"选项onComplete，就是用来处理服务器的反馈信息的，我们稍后再写这个选项的内容，先看看process.php是返回哪些内容的呢。 ２、process.php反馈上传信息
process.php的任务就是给浏览器返回JSON数据（至于什么是JSON请参考其它教程，把JSON想像成\"键/值\"对就可以了，它很方便数据的传输与读取）。在PHP里，一般是先把数据整理成数组的形式，然后使用json_encode()把数据转换成JSON。那process.php应该给浏览器返回什么样的数据呢？
文件是否成功上传 -> message 文件的上传状态代码 -> code 文件上传的存放路径 -> path 图片的宽度 -> width 图片的高度 -> height 图片的缩放比例 -> scale 图片的名称 -> name
其中之所以设置图片的缩放比例scale，是因为如果用户上传的图片尺寸太大（比如800x８00），浏览器中的DIV会被\"撑开\"，布局会被打乱。因此我们限定在浏览器显示图片的时候任何一边长不能超过400px,否则在显示的时候以等比例缩放。（比如上面的800x800的图上会显示成400x400的，然后浏览器同时设置scale为0.5）。
9
另外，这个php文件是调用了PIPHP_UploadFile.php这个插件，用来将上传的文件进行\"鉴别\"与\"搬移\"。 下面是process.php的程序： require_once(dirname(__FILE__).\"/../PIPHP_UploadFile.php\"); $response=array(
'message'=>'未知上传错误', 'path'=>'',
'code'=>-4, //上传结果代码，0表示成功，－1表示失败 'width'=>100, 'height'=>100, 'scale'=>1, //比例尺 'name'=>'' );
if (!empty($_FILES)) {
$name='picture'; $uploadFile='uploads/'; $maxLen=9*1024*1024;
$result=PIPHP_UploadFile($name,$uploadFile,$maxLen); $response['code']=$result[0]; //简单汇报成功情况
10
if($result[0]==0) {
$response['message']='上传成功！'; //$response['message']=$result[2]; $response['path']=$result[1]; $response['name']=$result[2]; //获取图像的高度与宽度
$fileName=iconv(\"utf-8\
list($width,$height)=getimagesize($_SERVER['DOCUMENT_ROOT'].$uploadFile.$fileName);
$response['width']=$width; $response['height']=$height; } else {
switch($result[0]) {
case -1: $response['message']=\"上传失败\"; break; case -2: $response['message']=\"文件类型错误\";break; case -3: $response['message']=\"文件大小超过限制\";break; default: $response['message']=\"错误代码：$result[0]\";
11
} } } else{
$response['message']=\"上传文件出现错误！\".\"
\"; }
$json_str=json_encode($response); echo $json_str; ?>
其实这个程序因为有了if判断语句而显示有点大，其实逻辑还是挺简单的。无论如何，这个程序返回的我上面说的有关图片的上传信息（放在$json_str这变量里了）
12
因篇幅问题不能全部显示，请点此查看更多更全内容