javascript - 如何检测何时在 Chrome 中上传空目录？-6ren

javascript - 如何检测何时在 Chrome 中上传空目录？

转载作者：行者123 更新时间：2023-11-28 02:44:39

我创建了一个 type="file"的输入元素，其中包含多个 webkitdirectory、allowdirs 和目录属性。

然后我添加了一个“更改”事件处理程序，它在我选择要上传的文件目录时起作用。

但是，如果我不小心选择了一个空目录，我就不会收到更改事件。我可以使用任何其他事件来检测是否选择了一个空目录吗？

我希望能够告诉用户所选目录为空，并尝试选择另一个目录。现在我根本无法检测到用户做了什么，也没有向用户说明为什么他们的选择没有做任何事情。

这已被报告为错误:

https://bugs.chromium.org/p/chromium/issues/detail?id=360412

但我想知道是否有解决方法。

最佳答案

您可以使用 Promise 构造函数在 drop 事件中迭代 Directory 和 File 实例，调度函数调用自身, 将 File 实例推送到一个数组；如果数组 .length 在过程完成时等于 0，则文件夹不包含文件。

另见 How to upload and list directories at firefox and chrome/chromium using change and drop events .

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    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 or folders here!\aOr click to select files folders";
      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;
    }

    #result li span {
      font-weight: bold;
      color: navy;
    }
  </style>
</head>


<body>
  <label id="dropArea" class="area">
    <input id="file" type="file" directory allowdirs webkitdirectory/>
  </label>
  <output id="result">
    <ul></ul>
  </output>
  <script>
    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) {
      var webkitResult = [];
      var files;
      console.log(event);
      event.stopPropagation();
      event.preventDefault();
      dropArea.className = "area";

      function handleEntries(entry) {
        let file = "webkitGetAsEntry" in entry ? entry.webkitGetAsEntry() : entry
        return Promise.resolve(file);
      }

      function handleFile(entry) {
        return new Promise(function(resolve) {
          if (entry.isFile) {
            entry.file(function(file) {
              listFile(file, entry.fullPath).then(resolve)
            })
          } else if (entry.isDirectory) {
            var reader = entry.createReader();
            reader.readEntries(webkitReadDirectories.bind(null, entry, handleFile, resolve))
          } else {
            var entries = [entry];
            return entries.reduce(function(promise, file) {
                return promise.then(function() {
                  return listDirectory(file)
                })
              }, Promise.resolve())
              .then(function() {
                return Promise.all(entries.map(function(file) {
                  return listFile(file)
                })).then(resolve)
              })
          }
        })

        function webkitReadDirectories(entry, callback, resolve, entries) {
          console.log(entries);
          return listDirectory(entry).then(function(currentDirectory) {
            console.log(`iterating ${currentDirectory.name} directory`, entry);
            return entries.reduce(function(promise, directory) {
              return promise.then(function() {
                return callback(directory)
              });
            }, Promise.resolve())
          }).then(resolve);
        }

      }
      
      function listDirectory(entry) {
        console.log(entry);
        var path = (entry.fullPath || entry.webkitRelativePath.slice(0, entry.webkitRelativePath.lastIndexOf("/")));
        var cname = path.split("/").filter(Boolean).join("-");
        console.log("cname", cname)

        return Promise.resolve(entry);
      }
       // TODO: handle mozilla files
      function listFile(file, path) {
        path = path || file.webkitRelativePath || "/" + file.name;

        console.log(`reading ${file.name}, size: ${file.size}, path:${path}`);
        webkitResult.push(file);
        return Promise.resolve(webkitResult)
      };

      function processFiles(files) {
        Promise.all([].map.call(files, function(file, index) {
            return handleEntries(file, index).then(handleFile)
          }))
          .then(function() {
            console.log("complete", webkitResult);
            if (webkitResult.length === 0) {
              alert("empty directory")
            }
          })
          .catch(function(err) {
            alert(err.message);
          })
      }

      // do webkit stuff
      if (event.type === "drop" && event.target.webkitdirectory) {
        files = event.dataTransfer.items || event.dataTransfer.files;
      } else if (event.type === "change") {
        files = event.target.files;
      }

      if (files) {
        processFiles(files)
      }

    }
    dropArea.addEventListener("dragover", dragHandler);
    dropArea.addEventListener("change", filesDroped);
    dropArea.addEventListener("drop", filesDroped);
  </script>
</body>

</html>

关于javascript - 如何检测何时在 Chrome 中上传空目录？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42129928/

文章推荐： javascript - 填充数据库字段后禁用提交按钮

文章推荐： html - html 输入的宽度不是从父级继承的

文章推荐： PHP从子窗口向父窗口传递数据

ruby - 空目录(删除所有文件)
在纯 Ruby 中删除目录中所有文件的安全有效方法是什么？我写了 Dir.foreach(dir_path) {|f| File.delete(f) if f != '.' && f != '..'}
c# - 删除测试后的 MSTest 空目录
我有一个单元测试(在 VS2008 或 VS2010 中使用 MSTest)，我在其中创建了一个这样的文件夹: [TestMethod] public void TestMethod1() {
java - 如何在 Intellij 中从 CVS 中 check out 空目录？
有人在 CVS 中创建了一个空包。我想在 Intellij 中 checkout 这个包，但 intellij 中没有出现任何内容。有人知道原因以及如何解决吗？最佳答案您必须在结帐 Intell

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何检测何时在 Chrome 中上传空目录？