[AjaxPHPjQuery图片截图上传.docVIP

Ajax+PHP+jQuery图片截图上传 一、功能分析 用户直接上传图片，点击上传按钮之后，在图片预览图内可预览图片，然后进行图片的裁剪前预览，当点击裁剪按钮时确定裁剪图片，并在裁剪结果区域显示裁剪后的效果。 （说明：我是将上传文件保存在/uploads文件夹中，而截图结果放在/avatar文件夹里） 实现效果预览： 二、解决方案 1、插件的选择 jQuery：这个是必备的一个插件可以到官网上下载 /Downloading_jQuery imgAreSselect:这个是实现客户端上图片区域选择的 /projects/imgareaselect/ uploadify：实现文件的上传的功能，支持多文件上传，且可定制性非常强。 /download/ 上面的插件是用在客户端上，其实在我这个程序里写PHP时也用了一些插件。其实我之所以写图像剪裁上传的起源是因为我看了《PHP快速开发工具箱》想自己练习一下的。该书是有一个网址（/），里面有整本书的代码，而且每个插件都相应的demo，非常不错。下面是用到的PHP插件： PIPHP_UploadFile.php：这是一个文件上传功能的php文件 /plug-in11.php PIPHP_ImageCrop.php：这个php文件是具有对图片进行裁剪的功能 /plug-in15.php 2、客户端与服务器之间的交互图 为了便于理解，我先把交互图放在这里。其中绿色部分是客户端的主要步骤、粉红色是服务器端的主要步骤，服务器与客户端之间的交互通过AJAX完成。可以发现，大部分的操作在客户端进行，服务器端与客户端之间的交流只是简单的JSON数据，因此这样给用户的体验是非常高的。 截图 1　客户端与服务器之间交互图 3、客户端文件 展示给用户的是html页面，为了学习并巩固CSS知识，就和DIV+CSS搭建了下面这样一个前台页面，见截图 2。 截图 2　前台页面 跟客户端有关的文件主要是一个index.html，而在这个文件里面会引用其他的插件文件，因此可以说，客户端方面只有一个html文件。 另外，由于这里主要讨论客户端与浏览器之间的交互，因此略过CSS方面的内容。这里只列出HTML的代码，首先是head部分： head meta http-equiv=Content-Type content=text/html; charset=utf-8 / link rel=stylesheet type=text/css href=/imgareaselect/css/imgareaselect-default.css / link rel=stylesheet type=text/css href=layout.css / link href=/uploadify/uploadify.css type=text/css rel=stylesheet / script type=text/javascript src=/js/jquery-1.6.2.min.js/script script type=text/javascript src=/imgareaselect/scripts/jquery.imgareaselect.pack.js/script script type=text/javascript src=/uploadify/swfobject.js/script script type=text/javascript src=/uploadify/jquery.uploadify.v2.1.4.min.js/script title图片剪切上传/title /head 可以看得出来主要是引用一些插件的文件。上面的文件（包括CSS文件与js文件）都可以从我给的链接里下载到，只是样式表layout.css是我自己写的样式表，大家可以根据自己的CSS知识写出。 接下来是body部分，也许这么看代码比较乱，推荐使用一些带有高亮显示的工具来查看这些代码，比如DreamWeaver等IDE，实在不行，也可以用火狐的查看源代码来看。（火狐不仅是一个好浏览器，更是一个极棒的调试器！） 为了方便起见，我去掉诸如导航条、页脚版权声明等点缀部分，只给出必要的html代码。 body class=home form fieldset legend图片上传/legend div id=queue/div input type=file name=file id=pic_upload/br / a id=uploadLink href=javascript:$(#pic_upload).uploadifyUpload();上传图片 /a div id=uploadInfo/div /fields