Question

我有一个放置区域，我想检测拖动的项目是文件夹还是文件。在chrome中我通过使用

实现了这一点

for (var i = 0; i < nrOfFiles; i++) {
    var entry = e.originalEvent.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isDirectory) {
        //folder detection
}

在firefox中无法使用上述解决方案（webkit），在花了很多时间试图解决这个问题后，我提出了以下解决方案（并且失败了）

我检查拖动的项目是否没有类型和大小，如下所示，并且在大多数情况下它按预期工作。从我所看到的这个效率并不高，因为有些文件可能没有文件扩展名，所以我尝试用FileReader API读取文件为二进制字符串（readAsBinaryString）或readAsArrayBuffer，并在项目为的情况下捕获异常不可读，但永远不会抛出异常。
```
var files = e.originalEvent.dataTransfer.files;
for (var i = 0; i < nrOfFiles; i++) {
if (files[i].size === 0 && files[i].type==="") {

    try{
       var reader = new FileReader();
        reader.readAsBinaryString(files[i]);
    }catch(e){
        //folder detection ?
    }

}}
```

在下面的解决方案中，我尝试使用mozGetDataAt，这是相应的webkitGetAsEntry（???不是100％关于这个请纠正我，如果我错了）但我得到一个安全例外。

var entry = e.originalEvent.dataTransfer.mozGetDataAt("application/x-moz-file",i);
if (entry.isDirectory) { //not even reaching this statement. idk if isDirectory is applicable to entry
    //folder detection?
}

例外是：

http://localhost:8080拒绝为UnnamedClass类的对象创建包装器的权限

实际上有一种方法可以在Firefox中执行此操作吗？如果可能，我不想依赖第三方库或服务器端处理。任何建议 - 评论将不胜感激。

Answer 1

可以在Firefox 42及更高版本中使用（https://developer.mozilla.org/en-US/Firefox/Releases/42，https://nightly.mozilla.org/）：

https://jsfiddle.net/28g51fa8/3/

e.g。使用Drang＆＃39; n＆＃39; Drop事件：e.dataTransfer.getFilesAndDirectories();

或使用新的输入对话框，让用户在文件或文件夹上传之间进行选择：

<input id="dirinput" multiple="" directory="" type="file" />
<script>
var dirinput = document.getElementById("dirinput");
dirinput.addEventListener("change", function (e) {
  if ('getFilesAndDirectories' in this) {
    this.getFilesAndDirectories().then(function(filesAndDirs) {
        for (var i=0, arrSize=filesAndDirs.length; i < arrSize; i++) {
            iterateFilesAndDirs(filesAndDirs[i]);
        }
    });
  }
}, false);
</script>

相关的Bugzillas：

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310（针对新文件系统API的缩减子集实施MS＆＃39;

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880（发货目录拣货和目录拖放）

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924（支持过滤Directory :: GetFilesAndDirectories）

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21（2016年11月在Firefox 50发布）

代码部分来自： https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop（https://archive.is/ZBEdF）

到目前为止，不幸的是MS Edge中没有： https://dev.modern.ie/platform/status/draganddropdirectories/

Answer 2

您的问题的简单答案是“否”，无法在Firefox中使用拖放功能读取文件夹。

似乎没有用于处理文件夹的HTML5标准（尚未）。 Chrome处理文件夹的能力是他们在浏览器中内置的（标准之外）。

目前无法使用HTML5 / Javascript在Firefox（或我相信的IE）中进行文件夹拖放。 Mozilla's bugzilla上的此功能存在“错误”，并且它提到W3C目前已停止为涵盖目录的文件系统API创建标准规范（尽管存在此editor's draft）。该Mozilla bug仍然处于NEW状态，并且似乎没有被分配/使用。

微软对此功能有this unofficial edge document，如果您对在IE中尝试此问题也有疑问，可能会感兴趣。

Answer 3

以下是我为解决这个问题所做的工作：

var files = [];

for( var i = 0; i < e.dataTransfer.files.length; i++ ){
    var ent = e.dataTransfer.files[i];
    if( ent.type ) {
        // has a mimetype, definitely a file
        files.push( ent );
    } else {
        // no mimetype:  might be an unknown file or a directory, check
        try {
            // attempt to access the first few bytes of the file, will throw an exception if a directory
            new FileReader().readAsBinaryString( ent.slice( 0, 5 ) ); 
            // no exception, a file
            files.push( ent );
        } catch( e ) {
            // could not access contents, is a directory, skip
        }
    }
}

基本上：

如果拖放条目具有mime类型，则它是文件
否则，请尝试阅读条目内容
- 只读取前5个字节（以避免意外将大文件加载到内存中）：ent.slice( 0, 5 )
- 如果读取成功，则为文件
- 如果读取失败，那么这是一个目录

享受！

在Firefox中HTML5拖放文件夹检测。它甚至可能吗？

3 个答案: