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

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

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

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

1. 拖拽顯示圖片

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

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