這幾天自己在寫一個cms.之前在用到圖片上傳裁切的時候總是用的flash的,或者是swfupload之類的。用的還不熟練，所以今天就用ajax做一個圖片上傳裁切的實例.個人感覺還不錯,現(xiàn)在就分享出來.我用的是ThinkPHP的框架,先將用到的插件分享出來.demo下載

ajaxfileupload.js ? ?ajax上傳文件的插件。

jquery.imgareaselect.min.js ? ? ? ?圖片裁切插件

jquery.min.js ? ? ? ?jquery框架文件

先寫好需要的樣式

對應(yīng)的html代碼

樣式css

ok，然后開始第一步，要先實現(xiàn)彈窗效果。點擊上傳按鈕彈出class=dialog上傳圖片的div。

第二步是點擊上傳文件就上傳并且無刷新替換到預(yù)覽區(qū)域的圖片地址

這里用到了ajax上傳的插件，在上傳成功以后，則加載裁切程序。aspectRatio:?'160:120',這部分是裁切區(qū)域的比例，如果沒有指定則可以自由裁切。

最后在點擊完成裁切以后，則隱藏彈出框并且把地址帶回。

圖片上傳對應(yīng)的php代碼

這里用到的就是ThinkPHP自帶的圖片上傳，但是在上傳以后，為了不讓太大，太小或者不規(guī)則的圖影響到裁切時候的效果，所以適當對圖片做了下裁切。然后將圖片上傳的地址返回給ajax

圖片裁切代碼

圖片裁切就是通過坐標以及裁切時候的大小，返回到php的類里去完成最后的裁切。

總結(jié)

以上是生活随笔為你收集整理的php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。