Firefox 中的 HTML5 拖放文件夹检测.甚至有可能吗? [英] HTML5 drag and drop folder detection in firefox. Is it even possible?

问题描述

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

实现了这一点

for (var i = 0; i 

在 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==="") {尝试{var reader = new FileReader();reader.readAsBinaryString(files[i]);}catch(e){//文件夹检测 ?}}}

2. 在下面的解决方案中，我尝试使用 mozGetDataAt，它是相应的 webkitGetAsEntry(???不是 100% 的关于这个，如果我错了请纠正我)但我得到一个安全异常.

   var entry = e.originalEvent.dataTransfer.mozGetDataAt("application/x-moz-file",i);if (entry.isDirectory) {//甚至没有达到这个语句.idk 如果 isDirectory 适用于条目//文件夹检测?}

例外是:

<块引用>

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

实际上有没有办法在 Firefox 中做到这一点?如果可能，我不想依赖第三方库或服务器端处理.任何建议 - 评论将不胜感激.

解决方案

在 Firefox 42 及更高版本中是可能的 (https://developer.mozilla.org/en-US/Firefox/Releases/42, https://nightly.mozilla.org/):

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

例如通过使用 Drang'n'Drop 事件:e.dataTransfer.getFilesAndDirectories();

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

<脚本>var dirinput = document.getElementById("dirinput");dirinput.addEventListener("change", function (e) {if ('getFilesAndDirectories' 在这) {this.getFilesAndDirectories().then(function(filesAndDirs) {for (var i=0, arrSize=filesAndDirs.length; i < arrSize; i++) {iterateFilesAndDirs(filesAndDirs[i]);}});}}， 错误的);

相关 Bugzilla:

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310(实施 MS 的提议，以减少新 FileSystem API 的子集)

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880(Ship 目录选取和目录拖放)

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

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

部分代码来自: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/

I have a drop zone where I want to detect whether the dragged item is a folder or file. In chrome I achieved this by using

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

In firefox it is not possible to use the above solution(webkit) and after spending many hours trying to solve this I came up with the following solutions (and failed)

1. I check whether the dragged item has no type and no size as below and in most cases it is working as expected. From what I've read this is not efficient and not successful all the times as some files may not have file extension so I try to read file as binary string(readAsBinaryString) or readAsArrayBuffer with FileReader API and catch the exception in case the item is not readable but the exception is never thrown.

   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. In the following solution i am trying to use mozGetDataAt which is the corresponding webkitGetAsEntry (??? Not 100% about this please correct me if i am wrong) but i am getting a security exception.

   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?
   }
   

And the exception is :

Permission denied for http://localhost:8080 to create wrapper for object of class UnnamedClass

Is there actually a way to do this in firefox? I do not want to rely on third party libraries or server side processing if possible. Any suggestions-comments would be much appreciated.

解决方案

It IS possible in Firefox 42 and upwards (https://developer.mozilla.org/en-US/Firefox/Releases/42, https://nightly.mozilla.org/):

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

e.g. by using Drang'n'Drop events: e.dataTransfer.getFilesAndDirectories();

or by using a new input dialog, letting the user select between files or folder upload:

<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>

Related Bugzillas:

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310 (Implement MS's proposal for a reduced subset of the new FileSystem API)

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 (Ship directory picking and directory drag and drop)

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924 (Support filtering of Directory::GetFilesAndDirectories)

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21 (Released in Firefox 50, november 2016)

Code partially from: https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop (https://archive.is/ZBEdF)

Unfortunatelly not in MS Edge so far: https://dev.modern.ie/platform/status/draganddropdirectories/

这篇关于Firefox 中的 HTML5 拖放文件夹检测.甚至有可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！