那么还有什么方法可以判断呢，思路大概是这样子的，用户拖拽的文件和文件夹应该是不一样的东西，用File API操作的时候应该会有区别，比如进行某些操作的时候，文件就能够正常操作，但是文件夹就会报错，通过错误的捕获就能够判断是文件还是文件夹了，好我们根据这个思路来写一下。
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++){ var dropFile = df.files[i]; if ( dropFile.type ) { // 如果type不是空串，一定是文件 dropFiles.push(dropFile); } else { try { var fileReader = new FileReader(); fileReader.readAsDataURL(dropFile.slice(0, 3)); fileReader.addEventListener('load', function (e) { console.log(e, 'load'); dropFiles.push(dropFile); }, false); fileReader.addEventListener('error', function (e) { console.log(e, 'error，不可以上传文件夹'); }, false); } catch (e) { console.log(e, 'catch error，不可以上传文件夹'); } } } } }, false);
上面代码创建了一个FileReader实例，通过这个实例对文件进行读取，我测试读取一个1G多的文件要3S多，时间有点长，就用slice截取了前3个字符，为什么是前3个不是前2个或者前4个呢，因为代码是我写的，我开心这么写呗~
如果load事件触发了，就说明拖拽过来的东西是文件，如果error事件触发了，就说明是文件夹，为了防止其他可能的潜在错误，用try包起来这段代码。
三方应用的一点点小hack
经过测试发现通过Mac的Finder拖拽文件没有问题，但是有时候文件并不一定在Finder中，也可能在某些应用中，有一个应用叫做圈点，这个应用的用户反馈文件拖拽失效，去看了其他开源文件上传的源码，发现了这样一行代码：
dropZone.addEventListener("dragover", function (e) { e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用，如圈点 e.preventDefault(); e.stopPropagation(); }, false);
需要把dropEffect置为copy，上网搜了下这个问题，源码文档中也没有说为什么要加这个，有兴趣的同学可以找一下为什么。
可以拿来就用的代码
由于用了FileReader去读取文件，这是一个异步IO操作，为了记录当前处理了多少个文件，以及什么时候触发拖拽结束的回调，写了一个checkDropFinish的方法一直去比较处理的文件数量和文件总数，确定所有文件处理完了后就去调用完成的回调。
另外，我在最后调试异步处理的时候，用的断点调试，发现断点调试在Safari中会导致异步回调不触发，需要自己调试定制功能的同学注意下。
// 获得拖拽文件的回调函数 function getDropFileCallBack (dropFiles) { console.log(dropFiles, dropFiles.length); } var dropZone = document.querySelector("#dropZone"); dropZone.addEventListener("dragenter", function (e) { e.preventDefault(); e.stopPropagation(); }, false); dropZone.addEventListener("dragover", function (e) { e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用，如圈点 e.preventDefault(); e.stopPropagation(); }, false); dropZone.addEventListener("dragleave", function (e) { e.preventDefault(); e.stopPropagation(); }, false); dropZone.addEventListener("drop", function (e) { e.preventDefault(); e.stopPropagation(); var df = e.dataTransfer; var dropFiles = []; // 拖拽的文件，会放到这里 var dealFileCnt = 0; // 读取文件是个异步的过程，需要记录处理了多少个文件了 var allFileLen = df.files.length; // 所有的文件的数量，给非Chrome浏览器使用的变量 // 检测是否已经把所有的文件都遍历过了 function checkDropFinish () { if ( dealFileCnt === allFileLen-1 ) { getDropFileCallBack(dropFiles); } dealFileCnt++; } if(df.items !== undefined){ // Chrome拖拽文件逻辑 for(var i = 0; i < df.items.length; i++) { var item = df.items[i]; if(item.kind === "file" && item.webkitGetAsEntry().isFile) { var file = item.getAsFile(); dropFiles.push(file); console.log(file); } } } else { // 非Chrome拖拽文件逻辑 for(var i = 0; i < allFileLen; i++) { var dropFile = df.files[i]; if ( dropFile.type ) { dropFiles.push(dropFile); checkDropFinish(); } else { try { var fileReader = new FileReader(); fileReader.readAsDataURL(dropFile.slice(0, 3)); fileReader.addEventListener('load', function (e) { console.log(e, 'load'); dropFiles.push(dropFile); checkDropFinish(); }, false); fileReader.addEventListener('error', function (e) { console.log(e, 'error，不可以上传文件夹'); checkDropFinish(); }, false); } catch (e) { console.log(e, 'catch error，不可以上传文件夹'); checkDropFinish(); } } } } }, false);
您可能感兴趣的文章: