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

查看:258
本文介绍了HTML5在Firefox中拖放文件夹检测。这甚至有可能吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道这个问题可能是重复的,但因为现有的解决方案都不能帮助我发布我自己的问题。
我有一个拖放区域,我想检测拖动的项目是文件夹还是文件。在铬我达到了这一点,通过使用

  for(var i = 0; i< nrOfFiles; i ++){
var entry = e.originalEvent.dataTransfer.items [i] .webkitGetAsEntry();
if(entry.isDirectory){
//文件夹检测
}



在firefox中,不可能使用上面的解决方案(webkit),并花了很多时间试图解决这个问题后,我想出了以下解决方案(并失败)


  1. 我检查拖动的项目是否没有类型和大小如下,在大多数情况下,它正在按预期工作。从我读过这是不高效率和不成功的一些文件可能没有文件扩展名,所以我尝试读取文件作为二进制字符串(ReadAsBinaryString)或ReadReaderAsArrayBuffer与FileReader API和捕获异常的情况下,项目是不可读,但不会抛出异常。

      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){
    //文件夹检测?

    $ b $}


  2. 解决方案我想使用mozGetDataAt这是相应的webkitGetAsEntry(???不是100%关于这个请纠正我,如果我错了),但我得到一个安全例外。

      var entry = e.originalEvent.dataTransfer.mozGetDataAt(application / x-moz-file,i); 
    if(entry.isDirectory){//甚至没有达到这个声明。 idk if isDirectory是否适用于条目
    //文件夹检测?

    code

    $ b $ p $例外是:

     权限拒绝< http:// localhost:8080>为类UnnamedClass创建包装

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



    谢谢

    M


    <解决方案

/ Firefox / Releases / 42rel =nofollow noreferrer> https://developer.mozilla.org/zh-CN/Firefox/Releases/42 , https://nightly.mozilla.org/ ):

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



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



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

 < input id =dirinputmultiple =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 (发布于Firefox 50,2016年11月)



部分代码om:
https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop

不幸的是,目前还不在MS Edge中:
https://dev.modern.ie/platform/status/draganddropdirectories/


I know that this issue might be duplicate but since none of the existing solutions could help me i am posting my own issue. I have a drop zone where I want to detect whether the dragged item is 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.

Thanks

M

解决方案

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/

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆