jquery 火狐中的HTML5拖放文件夹检测,它甚至可能吗？

dy2hfwbg 于 2023-02-03 发布在 jQuery

关注(0)|答案(3)|浏览(170)

我有一个拖放区，我想在那里检测拖动的项目是文件夹还是文件。

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

在火狐中，不可能使用上面的解决方案（webkit），在花了很多时间试图解决这个问题之后，我想出了下面的解决方案（但失败了）
1.我检查拖动的项目是否没有类型和大小，如下所示，在大多数情况下，它按预期工作。从我所读到的，这是不是有效的，并不成功的所有时间，因为一些文件可能没有文件扩展名，所以我尝试读取文件作为二进制字符串（readAsBinaryString）或readAsArrayBuffer与FileReader API，并捕捉异常的情况下，该项目是不可读的，但该异常从未抛出。

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

}}

1.在下面的解决方案中，我试图使用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的对象创建 Package
在firefox中有没有办法做到这一点？如果可能的话，我不想依赖第三方库或服务器端处理。任何建议和评论都将不胜感激。

jquery

来源：https://stackoverflow.com/questions/23423163/html5-drag-and-drop-folder-detection-in-firefox-is-it-even-possible

3条答案

按热度按时间

tvz2xvvm1#

在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的提案，以减少新文件系统API的子集）
https://bugzilla.mozilla.org/show_bug.cgi?id=1188880（发货目录选取和目录拖放）
https://bugzilla.mozilla.org/show_bug.cgi?id=1209924（支持目录过滤：：获取文件和目录）
https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21 （2016年11月在火狐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/更新：边缘现在似乎受支持。

赞(0）回复(0）举报 2023-02-03

e1xvtsh32#

下面是我解决这个问题的方法：

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 )
如果读取成功，则它是一个文件
如果读取失败，则此目录

好好享受吧!

赞(0）回复(0）举报 2023-02-03

hmae6n7t3#

你的问题的简单答案是“不”，在Firefox中没有办法使用拖放来读取文件夹。
似乎还没有一个HTML5标准来处理文件夹，Chrome处理文件夹的能力是他们内置在浏览器中的定制（标准之外）。
目前还没有办法在Firefox（或者IE，我相信）中使用HTML5/Javascript进行文件夹拖放。Mozilla's bugzilla上有一个关于这个特性的“bug”，它提到W3C目前已经停止创建一个覆盖目录的文件系统API的标准规范（尽管有这个编辑器的草案）。这个Mozilla bug仍然处于新状态，没有出现分配/采取。
微软有this unofficial edge document的功能，这可能是有趣的，如果你也有问题，尝试在IE浏览器。

赞(0）回复(0）举报 2023-02-03

我来回答

jquery 火狐中的HTML5拖放文件夹检测,它甚至可能吗？

3条答案

相关问题

热门标签

最新问答