当前位置: 首页 > 面试题库 >

如何使用更改和删除事件在Firefox和chrome / chromium上载和列出目录

蒋阳华
2023-03-14
问题内容

现在,mozilla和webkit浏览器都允许目录上传。当在<input type="file">元素上选择目录或在元素上删除目录时,如何以顺序显示所有目录和文件的顺序,使其出现在firefox和chrome /
chromium的实际目录中,并在迭代所有上载目录后对文件执行任务?


问题答案:

您可以在element 处设置webkitdirectoryallowdirs属性<inputtype="file">;附changedrop事件<inputtype="file">元件;使用.getFilesAndDirectories()Mozilla的,.createReader().readEntries()webkitArray.prototype.reduce()Promise,递归。

请注意,在firefox drop事件中不会将选择列为Directory,而是具有的File对象size
0,因此,即使在event.dataTransfer.getFilesAndDirectories()使用firefox时,在firefox处放置目录也无法提供所放置文件夹的表示。allowdirs设置属性时,firefox还提供了两个输入元素。第一个元素允许单个文件上传,第二个元素允许目录上传。chrome/ chromium提供单个<inputtype="file">元素,其中只能选择单个或多个目录,而不能选择单个文件。

在同时包含文件和目录的目录中,首先读取目录。

<!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 mozResult = [];
      var files;
      console.log(event);
      event.stopPropagation();
      event.preventDefault();
      dropArea.className = "area";

      // do mozilla stuff
      // TODO adjust, call `listDirectory()`, `listFile()`
      function mozReadDirectories(entries, path) {
        console.log("dir", entries, path);
        return [].reduce.call(entries, function(promise, entry) {
            return promise.then(function() {
              return Promise.resolve(entry.getFilesAndDirectories() || entry)
                .then(function(dir) {
                  return dir
                })
            })
          }, Promise.resolve())
          .then(function(items) {
            var dir = items.filter(function(folder) {
              return folder instanceof Directory
            });
            var files = items.filter(function(file) {
              return file instanceof File
            });
            if (files.length) {
              // console.log("files:", files, path);
              files.forEach(function(file) {
                console.log(file)
              });
              mozResult = mozResult.concat.apply(mozResult, files);
            }
            if (dir.length) {
              // console.log(dir, dir[0] instanceof Directory);
              return mozReadDirectories(dir, dir[0].path || path);

            } else {
              if (!dir.length) {
                return Promise.resolve(mozResult).then(function(complete) {
                  return complete
                })
              }
            }

          })

      };

      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);
        }

      }
      // TODO: handle mozilla directories, additional directories being selected dropped and listed without
      // creating nested list at `html` where different directory selected or dropped
      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)
        if (!document.getElementsByClassName(cname).length) {
          var directoryInfo = `<li><ul class=${cname}>
                      <li>
                      <span>
                        Directory Name: ${entry.name}<br>
                        Path: ${path}
                        <hr>
                      </span>
                      </li></ul></li>`;
          var curr = document.getElementsByTagName("ul");
          var _ul = curr[curr.length - 1];
          var _li = _ul.querySelectorAll("li");
          if (!document.querySelector("[class*=" + cname + "]")) {
            if (_li.length) {
              _li[_li.length - 1].innerHTML += `${directoryInfo}`;
            } else {
              _ul.innerHTML += `${directoryInfo}`
            }
          } else {
            ul.innerHTML += `${directoryInfo}`
          }
        }
        return Promise.resolve(entry);
      }
       // TODO: handle mozilla files
      function listFile(file, path) {
        path = path || file.webkitRelativePath || "/" + file.name;
        var filesInfo = `<li>
                        Name: ${file.name}</br> 
                        Size: ${file.size} bytes</br> 
                        Type: ${file.type}</br> 
                        Modified Date: ${file.lastModifiedDate}<br>
                        Full Path: ${path}
                      </li>`;

        var currentPath = path.split("/").filter(Boolean);
        currentPath.pop();
        var appended = false;
        var curr = document.getElementsByClassName(`${currentPath.join("-")}`);
        if (curr.length) {
          for (li of curr[curr.length - 1].querySelectorAll("li")) {
            if (li.innerHTML.indexOf(path.slice(0, path.lastIndexOf("/"))) > -1) {
              li.querySelector("span").insertAdjacentHTML("afterend", `${filesInfo}`);
              appended = true;
              break;
            }

          }
          if (!appended) {
            curr[curr.length - 1].innerHTML += `${filesInfo}`;
          }
        }
        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)
          })
          .catch(function(err) {
            alert(err.message);
          })
      }

      if ("getFilesAndDirectories" in event.target) {
        return (event.type === "drop" ? event.dataTransfer : event.target).getFilesAndDirectories()
          .then(function(dir) {
            if (dir[0] instanceof Directory) {
              console.log(dir)
              return mozReadDirectories(dir, dir[0].path || path)
                .then(function(complete) {
                  console.log("complete:", complete);
                  event.target.value = null;
                });
            } else {
              if (dir[0] instanceof File && dir[0].size > 0) {
              return Promise.resolve(dir)
                    .then(function(complete) {
                      console.log("complete:", complete);
                    })
              } else {
                if (dir[0].size == 0) {
                  throw new Error("could not process '" + dir[0].name + "' directory"
                                  + " at drop event at firefox, upload folders at 'Choose folder...' input");
                }
              }
            }
          }).catch(function(err) {
            alert(err)
          })
      }

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


 类似资料:
  • 问题内容: 如何停止事件的处理或切换事件的功能? 修改后的代码: 问题答案: 您只需使用事件的新功能再次调用即可。既然你没有利用第三个参数,在此只是简单地覆盖任何已经存在。默认情况下,此参数为,但它也接受,它将在该事件已触发的回调中添加回调。 但是,如果您开始使用该可选参数,则需要使用该函数删除单个回调。当你调用一个返回。您可以将此作为第二个参数传递给。 例:

  • 问题内容: 拖放文件上传可以在Firefox 3.6中完成。 通过Google搜索 html5拖放文件上传- gmail,可以看到以下 内容: http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload http://www.thecssninja.com/javascript/drag-and-drop-u

  • 我在大学已经学习了4周的JavaScript,两周前在我自己的时间里开始学习Java。事实证明,它很有用,因为我们有一个项目,我们必须制定一个程序(这是我们为项目选择的)。 问题是,虽然我知道Java的大部分基础知识,但我对制作我们想要制作的程序知之甚少,我所有的其他团队成员甚至从未接触过Java,有些人甚至在课堂上与JavaScript作斗争。 对不起,顺便说一句,我只是想让人们了解我的来历。

  • 问题内容: 我将一些数据存储在localStorage中 我想在我的angularjs应用程序中看到的是,当localStorage中的数据更改时,该应用程序会重新渲染该应用程序,我该怎么做? 问题答案: 有一个角度的localStorage模块: https://github.com/grevory/angular-local- storage 经过进一步考虑,您可能需要将模块更改为在setIt

  • 本文向大家介绍addEventListener()和removeEventListener()追加事件和删除追加事件,包括了addEventListener()和removeEventListener()追加事件和删除追加事件的使用技巧和注意事项,需要的朋友参考一下 addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两

  • 在介绍本系列各个专题之前,有必要先解释一下极其容易混淆的几个概念,它们是WebKit,WebKit2,Chromium和Chrome。 首先来了解WebKit。广义上来说,WebKit是一个开源的项目,其前身是来源于KDE的KHTML和KJS。该项目专注于网页内容的展示,开发出一流的网页渲染引擎。它不是浏览器,而且也不想成为浏览器。 该项目包含两个部分,第一是WebCore,其中包含了对HTML,