如何在 Firefox 中过滤掉上传处理程序中的目录?

2024-03-09

Problem

我有以下代码片段,用于在文件拖放上传期间获取文件信息:

var files = event.dataTransfer.files;

for (var i = 0; i < files.length; i++) {
    var file = files[i];

    // I need notDirectory(file) function.
    notDirectory(file).then(function(file) {
      output.innerHTML += 
           `<p>
              Name: ${file.name}</br> 
              Size: ${file.size} bytes</br> 
              Type: ${file.type}</br> 
              Modified Date: ${file.lastModifiedDate}
            </p>`;
    });
}

我做了研究,发现Firefox不支持目录上传,但允许客户端将它们拖放到放置区域。

Question

如何在 Firefox 中过滤掉上传处理程序中的目录?

Update

您可以在这里找到工作示例:https://jsfiddle.net/gevorgha/exs3ta25/ https://jsfiddle.net/gevorgha/exs3ta25/

请考虑我需要它来工作最新稳定的 Firefox 版本 - 46.0.1 https://www.mozilla.org/en-US/firefox/releases/无需从浏览器启用额外的首选项,因为我不想要求用户启用首选项以使上传正常工作。


我的问题是最新稳定的 Firefox 有没有任何解决方法 版本来检测目录?因为在稳定版本上该功能 默认情况下是禁用的还是我错过了什么?

firefox 47默认不启用目录上传,尝试过html, javascript在 stacksnippets、jsfiddle。

See 面向开发者的 Firefox 42 接口/API/DOM https://developer.mozilla.org/en-US/Firefox/Releases/42#InterfacesAPIsDOM

The Directory接口已被实验性扩展(bug1177688 https://bugzilla.mozilla.org/show_bug.cgi?id=1177688)。两位成员Directory.path and Directory.getContents可以通过设置来暴露dom.input.dirpicker偏好true.

检测文件夹上传的解决方法可能包括

  1. Use <input type="file"> with directory and allowdirs属性集,可能包括multiple属性,参见Note https://wicg.github.io/directory-upload/proposal.html#h-note6,用于拖放或用户单击容器进行选择;
  2. Open prefs.js or about:config并设置dom.input.dirpicker偏好Boolean true;
  3. 使用“代码示例”的修改版本进行“1.文件输入”,位于目录上传演示 https://wicg.github.io/directory-upload/;
  4. 检查上传是否是Directory https://wicg.github.io/directory-upload/proposal.html#idl-def-directory并且没有一个File对象、使用if有条件(filesAndDirs[0] && filesAndDirs[0].constructor.name === "Directory") or (filesAndDirs[0] instanceof Directory)代替.then(function(filesAndDirectories){})在链接到.getFilesAndDirectories() https://wicg.github.io/directory-upload/proposal.html#dom-htmlinputelement-getfilesanddirectories;
  5. 代替<label>元素为<div>元素作为父元素<input type="file">。调整css of input type="file"填充父级可放置容器并设置opacity to 0;调整css在 的父元素处input type="file"显示文本于:before伪元素,超过input type="file"子元素。

也可以看看用于目录选取和拖放的新 API https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop.

请注意,该方法已在 firefox 47 上尝试过,其中目录和单个文件均已成功上传。

var dropArea = document.getElementById("dropArea");
var output = document.getElementById("result");
var ul = output.querySelector("ul");

function dragHandler(event) {
  event.stopPropagation();
  event.preventDefault();

  dropArea.className = "area drag";
}

function filesDroped(event) {
  event.stopPropagation();
  event.preventDefault();
  dropArea.className = "area";

  var uploadFile = function(file, path) {
    // handle file uploading
    console.log(file, path);
    var filesInfo = `<li>
                        Name: ${file.name}</br> 
                        Size: ${file.size} bytes</br> 
                        Type: ${file.type}</br> 
                        Modified Date: ${file.lastModifiedDate}
                      </li>`;
    ul.innerHTML += `${filesInfo}`;
  };

  var iterateFilesAndDirs = function(filesAndDirs, path) {
    for (var i = 0; i < filesAndDirs.length; i++) {
      if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') {
        var path = filesAndDirs[i].path;

        // this recursion enables deep traversal of directories
        filesAndDirs[i].getFilesAndDirectories()
          .then(function(subFilesAndDirs) {
            // iterate through files and directories in sub-directory
            iterateFilesAndDirs(subFilesAndDirs, path);
          });
      } else {
        uploadFile(filesAndDirs[i], path);
      }
    }
  };
  if ("getFilesAndDirectories" in event.target) {
    event.target.getFilesAndDirectories()
      .then(function(filesAndDirs) {
        // if directory
        var dir = filesAndDirs;
        if (dir[0] && dir[0].constructor.name === "Directory") {
          
          console.log(dir);
          var directoryInfo = `<li>
                        Directory Name: ${dir[0].name}</br> 
                        Path: ${dir[0].path}
                      </li>`;
          ul.innerHTML += `${directoryInfo}`;
          alert("isDirectory:true");
        }
        iterateFilesAndDirs(dir, "/");
      })

  } else {
    // do webkit stuff
  }
}

dropArea.addEventListener("dragover", dragHandler);
dropArea.addEventListener("change", filesDroped);
input[type="file"] {
  width: 98%;
  height: 180px;
}

label[for="file"] {
    width: 98%;
  height: 180px;
}

.area {
  display:block;
  border: 5px dotted #ccc;
  text-align: center;
}

.area:after {
  display: block;
  border:none;
  white-space: pre;
  /*content: "Drop your files here!\aOr click to select files";*/
  position: relative;
  left: 0%;
  top: -75px;
  text-align:center;
}

.drag {
  border: 5px dotted green;
  background-color: yellow;
}

#result ul {
  list-style: none;
  margin-top: 20px;
}

#result ul li {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
<label id="dropArea" class="area">
  <input id="file" type="file" allowdirs directory webkitdirectory/>
</label>
<output id="result">
  <ul></ul>
</output>

jsfiddlehttps://jsfiddle.net/exs3ta25/31/ https://jsfiddle.net/exs3ta25/31/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Firefox 中过滤掉上传处理程序中的目录? 的相关文章

随机推荐