由于前端是不能直接操作本地文件的，要么通過(guò)<input type="file">用戶點(diǎn)擊選擇文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日漸衰落，所以使用flash還是不提倡的。同時(shí)html5崛起，提供了很多的api操控，可以在前端使用原生的api實(shí)現(xiàn)圖片的處理，這樣可以減少后端服務(wù)器的壓力，同時(shí)對(duì)用戶也是友好的。

(筆者的個(gè)人站：http://yincheng.site/crop-upload-photo手機(jī)端的讀者推薦在這里看)

最后的效果如下：
平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),游戲開(kāi)發(fā),動(dòng)畫(huà)培訓(xùn)

這里面有幾個(gè)功能，第一個(gè)是支持拖拽，第二個(gè)壓縮，第三個(gè)是裁剪編輯，第四個(gè)是上傳和上傳進(jìn)度顯示，下面依次介紹每個(gè)功能的實(shí)現(xiàn)：

1. 拖拽顯示圖片

拖拽讀取的功能主要是要兼聽(tīng)html5的drag事件，這個(gè)沒(méi)什么好說(shuō)的，查查api就知道怎么做了，主要在于怎么讀取用戶拖過(guò)來(lái)的圖片并把它轉(zhuǎn)成base64以在本地顯示。

監(jiān)聽(tīng)drag和drop事件