javascript - Firefox 中的 HTML5 拖放文件夹检测。有可能吗？

Question

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

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

在 firefox 中无法使用上述解决方案 (webkit)，在花了很多时间尝试解决这个问题后，我想出了以下解决方案(但失败了)

1. 我检查拖动的项目是否没有类型和大小，如下所示，在大多数情况下它按预期工作。从我读过的内容来看，这效率不高而且并不总是成功，因为某些文件可能没有文件扩展名，所以我尝试使用 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 ?
       }
   
   }}
   

2. 在下面的解决方案中，我尝试使用 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?
   }
   

异常(exception)是:

Permission denied for http://localhost:8080 to create wrapper for object of class 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.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 (实现 MS 对新 FileSystem API 的精简子集的提议)

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/