在用户拖拽文件到浏览器的某个元素上时，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类型的数据，有如下的属性
属性
类型
说明
dropEffect
String
用来hack某些兼容性问题
effectAllowed
String
暂时不用
files
FileList
拖拽的文件列表
items
DataTransferItemList
拖拽的数据(有可能是字符串)
types
Array
拖拽的数据类型 该属性在Safari下比较混乱
在Chrome中我们用items对象获得文件，其他浏览器用files获得文件，主要是为了处理拖拽文件夹的问题，最好不允许用户拖拽文件夹，因为文件夹内可能还有文件夹，递归上传文件会很久，如果不递归查找，只上传目录第一层级的文件，用户可能以为上传功能了，但是没有上传子目录文件，所以还是禁止上传文件夹比较好，后面我会说要怎么处理。
Chrome获取文件
dropZone.addEventListener("drop", function (e) { e.preventDefault(); e.stopPropagation(); var df = e.dataTransfer; var dropFiles = []; // 存放拖拽的文件对象 if(df.items !== undefined) { // Chrome有items属性，对Chrome的单独处理 for(var i = 0; i < df.items.length; i++) { var item = df.items[i]; // 用webkitGetAsEntry禁止上传目录 if(item.kind === "file" && item.webkitGetAsEntry().isFile) { var file = item.getAsFile(); dropFiles.push(file); } } } }
其他浏览器获取文件
这里只测试了Safari，其他浏览器并没有测试，不过看完本文一定也有思路处理其他浏览器的兼容情况。
dropZone.addEventListener("drop", function (e) { e.preventDefault(); e.stopPropagation(); var df = e.dataTransfer; var dropFiles = []; // 存放拖拽的文件对象 if(df.items !== undefined) { // Chrome拖拽文件逻辑 } else { for(var i = 0; i < df.files.length; i++) { dropFiles.push(df.files[i]); } } }
由于Safari没有item，自然也没有webkitGetAsEntry，所以在Safari无法确定拖拽的是否是文件还是文件夹。
非Chrome内核浏览器判断目录的方法
浏览器获取到的每个file对象有四个属性：lastModified、name、size、type，其中type是文件的MIME Type，文件夹的type是空的，但是有些文件没有MIME Type，如果按照type是否为空判断是不是拖拽的文件夹的话，会误伤一部分文件，所以这个方法行。