由于前端是不能直接操作本地文件的，要么通过<input type="file">用户点击选择文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日渐衰落，所以使用flash还是不提倡的。同时html5崛起，提供了很多的api操控，可以在前端使用原生的api实现图片的处理，这样可以减少后端服务器的压力，同时对用户也是友好的。
(笔者的个人站：http://yincheng.site/crop-upload-photo手机端的读者推荐在这里看)
最后的效果如下：
这里面有几个功能，第一个是支持拖拽，第二个压缩，第三个是裁剪编辑，第四个是上传和上传进度显示，下面依次介绍每个功能的实现：
1. 拖拽显示图片
拖拽读取的功能主要是要兼听html5的drag事件，这个没什么好说的，查查api就知道怎么做了，主要在于怎么读取用户拖过来的图片并把它转成base64以在本地显示。
监听drag和drop事件
