H5中拖拽图片显示并上传

拖拽事件有7种，但是根据作用对象不同可以分为两大类：

被拖拽元素上触发的事件：

1. ondragstart - 用户开始拖动元素时触发
2. ondrag - 元素正在拖动时触发
3. ondragend - 用户完成元素拖动后触发

目标元素上触发的事件：

1. ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
2. ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
3. ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
4. ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

使用事件时，一般都会preventDefault()。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

将图片的缩略图显示出来使用的是FileReader API，具体请移步，这里就不多写了。

如何将图片文件上传 移步这里

如何剪裁图片等，之后再更新。