這幾天自己在寫一個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的類里去完成最后的裁切。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。