html5文件拖拽上传的示例代码分享

html5 文件拖拽上传是个老话题了，网上有很多例子，我一开始的代码也是网上找来改的，只是踩了几个坑之后就想把过程记录下来。

功能实现

下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现。 首先会介绍一些必须的基础。

拖拽事件

拖拽事件有下面这些：

• dragstart：当用户开始拖动对象时触发。

• dragenter： 当鼠标第一次经过目标元素，且有拖动发生时触发。此事件的监听者应指明在这个位置上是否允许drop，或者监听者不执行任何操作，那么drop默认是不允许的。

• dragover：当鼠标经过一个元素时，且有拖动发生时触发 。

• dragleave：当鼠标离开一个元素，且有拖动在发生时触发。

• drag： 当对象被拖动，每次移动鼠标时触发。

• drop：在drag操作的最后发生drop时，在元素上触发此事件。监听者应该负责检索拖动的数据，并插入drop的位置。

• dragend： 在拖动对象时放开鼠标按键时触发。

从浏览器外拖拽文件到浏览器时，必须要绑定的事件有 dragover 和 drop，其他的都可以不绑定。dragover 和drop 事件的处理函数内必须调用事件的 preventDefault() 函数，要不然浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。

DataTransfer对象