由于前端是不能直接操作本地文件的，要么通過<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ī)端的讀者推薦在這里看)
最后的效果如下：
這里面有幾個(gè)功能，第一個(gè)是支持拖拽，第二個(gè)壓縮，第三個(gè)是裁剪編輯，第四個(gè)是上傳和上傳進(jìn)度顯示，下面依次介紹每個(gè)功能的實(shí)現(xiàn)：
1. 拖拽顯示圖片
拖拽讀取的功能主要是要兼聽html5的drag事件，這個(gè)沒什么好說的，查查api就知道怎么做了，主要在于怎么讀取用戶拖過來的圖片并把它轉(zhuǎn)成base64以在本地顯示。
監(jiān)聽drag和drop事件
