ajax+php+jquery图片截图上传,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例...

这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的。用的还不熟练，所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来.我用的是ThinkPHP的框架,先将用到的插件分享出来.demo下载

ajaxfileupload.js    ajax上传文件的插件。

jquery.imgareaselect.min.js        图片裁切插件

jquery.min.js        jquery框架文件

先写好需要的样式

对应的html代码

样式css

ok，然后开始第一步，要先实现弹窗效果。点击上传按钮弹出class=dialog上传图片的div。

第二步是点击上传文件就上传并且无刷新替换到预览区域的图片地址

这里用到了ajax上传的插件，在上传成功以后，则加载裁切程序。aspectRatio: '160:120',这部分是裁切区域的比例，如果没有指定则可以自由裁切。

最后在点击完成裁切以后，则隐藏弹出框并且把地址带回。

图片上传对应的php代码

这里用到的就是ThinkPHP自带的图片上传，但是在上传以后，为了不让太大，太小或者不规则的图影响到裁切时候的效果，所以适当对图片做了下裁切。然后将图片上传的地址返回给ajax

图片裁切代码

图片裁切就是通过坐标以及裁切时候的大小，返回到php的类里去完成最后的裁切。