js实现控制文件拖拽并获取拖拽内容功能

在用户拖拽文件到浏览器的某个元素上时，js可以监听到与拖拽相关的事件，并对拖拽结果进行处理，本文讨论下和拖拽文件相关的一些问题，不过没有处理太多关于兼容性的问题。

拖拽事件

js能够监听到拖拽的事件有drag、dragend、dragenter、dragexit(没有浏览器实现)、dragleave、dragover、dragstart、drop，详细的内容可以看MDN。

其中，与拖拽文件相关的事件有dragenter(文件拖拽进)、dragover(文件拖拽在悬浮)、dragleave(文件拖拽离开)、drop(文件拖拽放下)。

拖拽事件可以绑定到指定的DOM元素上，可以绑定到整个页面中。

var dropEle = document.querySelector('#dropZone');dropEle.addEventListener('drop', function (e) {  // }, false);document.addEventListener('drop', function (e) {  // }, false);

阻止默认行为

一般来说，我们只需要把处理拖拽文件的业务逻辑写到drop事件中就可以了，为什么还要绑定dragenter、dragover、dragleave这三个事件呢？

因为当你拖拽一个文件到没有对拖拽事件进行处理的浏览器中的时候，浏览器会打开这个文件，比如拖拽一张图片浏览器会打开这个图片，在没有PDF阅读器的时候也可以拖拽一个PDF到浏览器中，浏览器就会打开这个PDF文件。

如果浏览器打开了拖拽的文件，页面就跳走了，我们希望得到拖拽的文件，而不是让页面跳走。上面说到浏览器会打开拖拽的文件是浏览器的默认行为，我们需要阻止这个默认行为，就需要再上述的事件中进行阻止。

dropZone.addEventListener("dragenter", function (e) {  e.preventDefault();  e.stopPropagation();}, false);dropZone.addEventListener("dragover", function (e) {  e.preventDefault();  e.stopPropagation();}, false);dropZone.addEventListener("dragleave", function (e) {  e.preventDefault();  e.stopPropagation();}, false);dropZone.addEventListener("drop", function (e) {  e.preventDefault();  e.stopPropagation();  // 处理拖拽文件的逻辑}

实际上dragenter不阻止默认行为也不会触发浏览器打开文件，为了防止某些浏览器可能有的兼容性问题，把拖拽周期中的所有的事件都阻止默认行为并且阻止了事件冒泡。

获得拖拽的文件

我们会在drop这个事件的回调中的事件对象能够得到文件对象。

在事件对象中，一个e.dataTransfer这样的属性，它是一个DataTransfer类型的数据，有如下的属性