检测javascript FileList对象中的文件夹/目录

Question

我最近为Moodle贡献了一些代码,它使用HTML5的一些功能,允许通过桌面拖放将文件上传到表单中(代码的核心部分在这里:https://github.com/moodle /moodle/blob/master/lib/form/dndupload.js供参考).

这种运作良好,除了当用户进行拖拽一个文件夹/目录,而不是一个真正的文件.然后将垃圾上传到服务器,但文件名与文件夹匹配.

我所寻找的是一个简单而可靠的方法检测一个存在的文件夹中的文件清单对象,这样我就可以跳过它(并可能返回一个友好的错误消息为好).

我查看了MDN上的文档,以及更一般的网络搜索,但没有透露任何内容.我还查看了Chrome开发人员工具中的数据,看来文件对象的"类型"始终设置为""用于文件夹.但是,我不太相信这是最可靠的跨浏览器检测方法.

有没有人有更好的建议？

Answer 1

你不能依靠file.type.没有扩展名的文件的类型为"".保存带.jpg扩展名的文本文件并将其加载到文件控件中,其类型将显示为image/jpeg.并且,名为"someFolder.jpg"的文件夹也将具有其类型image/jpeg.

尝试用a读取文件FileReader.如果拖入目录,FileReader则会引发error事件:

var reader = new FileReader();
reader.onload = function (e) {
    // it's a file
};
reader.onerror = function (e) {
    // it's a directory
};
reader.readAsText(file);

令人高兴的是,在IE11中,当一个目录被删除时,该e.dataTransfer.files集合是空的.

Chrome会在包含对象集合的e.dataTransfer被调用items中公开其他属性DataTransferItem.在每个对象上,您可以调用item.webkitGetAsEntry(),返回一个Entry对象.所述Entry对象具有属性isDirectory和isFile:

// Chrome only
if (e.dataTransfer.items && e.dataTransfer.items.length) {
   [].forEach.call(e.dataTransfer.items, function(item) {
      var entry = item.webkitGetAsEntry();
      if (entry && entry.isFile) {
         var file = item.getAsFile(); // same as object in e.dataTransfer.files[]
         // do something with the file
      }
   }
}

有趣的是,在我的实验中,我看过的每个文件夹都有File.size % 4096零.但是,当然,一些文件也会有. File.size不是文件是否实际上是文件夹的可靠指标.

Answer 2

我也遇到了这个问题,下面是我的解决方案.基本上,我采取了双管齐下的方法:

(1)检查File对象的大小是否很大,如果它超过1MB则认为它是一个真正的文件(我假设文件夹本身从不那么大). (2)如果File对象小于1MB,那么我使用FileReader的'readAsArrayBuffer'方法读取它.成功读取调用'onload',我相信这表明文件对象是一个真正的文件.失败的读取调用'onerror',我认为它是一个目录.这是代码:

var isLikelyFile = null;
if (f.size > 1048576){ isLikelyFile = false; }
else{
    var reader = new FileReader();
    reader.onload = function (result) { isLikelyFile = true; };
    reader.onerror = function(){ isLikelyFile = false; };
    reader.readAsArrayBuffer(f);
}
//wait for reader to finish : should be quick as file size is < 1MB ;-)
var interval = setInterval(function() {
    if (isLikelyFile != null){
        clearInterval(interval);
        console.log('finished checking File object. isLikelyFile = ' + isLikelyFile);
    }
}, 100);

我在FF 26,Chrome 31和Safari 6中测试了这个,并且在尝试读取目录时,三个浏览器调用'onerror'.如果有人能想到失败的用例,请告诉我.