Ajax+PHP+jQuery图片截图上传

一、功能分析

用户直接上传图片，点击"上传"按钮之后，在图片预览图内可预览图片，然后进行图片的裁剪前预览，当点击"裁剪"按钮时确定裁剪图片，并在"裁剪结果"区域显示裁剪后的效果。

（说明：我是将上传文件保存在"/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、客户端与服务器之间的交互图

为了便于理解，我先把交互图放在这里。其中绿色部分是客户端的主要步骤、粉红色是服务器端的主要步骤，服务器与客户端之间的交互通过AJAX完成。可以发现，大部分的操作在客户端进行，服务器端与客户端之间的交流只是简单的JSON数据，因此这样给用户的体验是非常高的。

截图 1　客户端与服务器之间交互图

 

3、客户端文件

展示给用户的是html页面，为了学习并巩固CSS知识，就和DIV+CSS搭建了下面这样一个前台页面，见截图 2。

截图 2　前台页面

跟客户端有关的文件主要是一个index.html，而在这个文件里面会引用其他的插件文件，因此可以说，客户端方面只有一个html文件。

另外，由于这里主要讨论客户端与浏览器之间的交互，因此略过CSS方面的内容。这里只列出HTML的代码，首先是部分：

imgareaselect-default.css" />