当用户将文件拖拽到浏览器的某个元素上时，js可以监听拖拽相关的事件，并对拖拽结果进行处理。本文讨论了一些与拖拽文件相关的问题，但是并没有处理太多关于兼容性的问题。拖拽事件js可以监听拖拽事件包括drag、dragend、dragenter、dragexit（无浏览器实现）、dragleave、dragover、dragstart、drop，详见MDN。其中与拖放文件相关的事件有dragenter（文件拖入）、dragover（文件拖入悬浮）、dragleave（文件拖走）、drop（文件拖放）。拖放事件可以绑定到指定的DOM元素，也可以绑定到整个页面。vardropEle=document.querySelector('#dropZone');dropEle.addEventListener('drop',function(e){//},false);document.addEventListener('drop',function(e){//},错误的）;防止默认行为一般来说，我们只需要将处理拖放文件的业务逻辑写到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并没有阻止默认行为，也没有触发浏览器打开文件，以防止某些可能的兼容性browsers性问题，拖拽循环中的所有事件都被阻止了默认行为和事件冒泡。要获取被拖拽的文件，我们会在拖拽事件的回调中获取事件对象中的文件对象。在事件对象中，有一个属性比如e.dataTransfer，是DataTransfer类型的数据，有如下属性属性类型说明dropEffectString用于hack一些兼容性问题effectAllowedString暂时不用filesFileList拖拽文件列表itemsDataTransferItemList拖拽数据（可能是String）typesArray拖拽数据类型这个属性在Safari中很容易混淆。在Chrome中我们使用items对象获取文件，其他浏览器使用files获取文件。这个主要是处理拖拽文件夹的问题。最好不要让用户拖动文件夹，因为文件夹中可能有文件夹，递归上传文件会耗费很长时间。如果不递归查找，只上传目录第一层的文件。最好禁止上传文件夹，后面会讲怎么处理。Chrome获取文件dropZone.addEventListener("drop",function(e){e.preventDefault();e.stopPropagation();vardf=e.dataTransfer;vardropFiles=[];//存储被拖动的文件对象if(df.items!==undefined){//Chrome有items属性，Chrome单独处理for(vari=0;i
