Upload-Ordner und alle seine Inhalte in JavaScript

Es scheint, dass Chrome und Firefox unterstützt, die Teil der Dateisystem-API, aber nicht oficially unterstützt.

Diese können Sie drop einen Ordner aus, und Lesen Sie alle Inhalte, hier der code, den ich auf meine app.

    function add Files(e){
        e.stopPropagation();
        e.preventDefault();

        //if directory support is available
        if(e.dataTransfer && e.dataTransfer.items)
        {
            var items = e.dataTransfer.items;
            for (var i=0; i<items.length; i++) {
                var item = items[i].webkitGetAsEntry();

                if (item) {
                  addDirectory(item);
                }
            }
            return;
        }

        //Fallback
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
        {
            alert('File type not accepted');
            return;
        }

        processFile(files);
    }

    function addDirectory(item) {
        var _this = this;
        if (item.isDirectory) {
            var directoryReader = item.createReader();
            directoryReader.readEntries(function(entries) {
            entries.forEach(function(entry) {
                    _this.addDirectory(entry);
                });
            });
        } else {
            item.file(function(file){
                processFile([file],0);
            });
        }
    },

• Für die Umsetzung der Ordner hochzuladen, müssen Sie gelten sowohl der JS-Seite und server-Seite:

• Auf JS-Seite habe ich diese Methoden verwenden (von einem Lehrer, einer StackoverFlow - https://stackoverflow.com/a/47935286/11544097) in Schleife-Datei für alle Datei -, Ordner-Inhalte und Unterordner:

  function makedir(entries) {
    const systems = entries.map(entry => traverse(entry, {}));
    return Promise.all(systems);
  
    async function traverse(entry, fs) {
      if (entry.isDirectory) {
        fs[entry.name] = {};
        let dirReader = entry.createReader();
        await new Promise((res, rej) => {
      dirReader.readEntries(async entries => {
        for(let e of entries) {
          await traverse(e, fs[entry.name]);
        }
        res();
      }, rej);
        });
      } else if (entry.isFile) {
        await new Promise((res, rej) => {
      entry.file(file => {
        fs[entry.name] = file;
        res();
      }, rej);
        });
      }
    return fs;
    }
  };
  
  function checkFile(obj){
      return obj instanceof File;
  };
  
  function exactFile(system_trees, relativePath, files){
      for (var i = 0; i < system_trees.length; i++){
          for (var property in system_trees[i]) {
              if (system_trees[i].hasOwnProperty(property)) {
                  if (checkFile(system_trees[i][property])){
                      system_trees[i][property]["relativePath"] = relativePath;
                      files.push(system_trees[i][property]);
                  } else {
                      files.concat(exactFile([system_trees[i][property]], (typeof relativePath !== 'undefined' && relativePath !== '' ? (relativePath + '/') : '') + property, files));
                  }
              }
          }
      }
      return files;
  };
  
  function readDropped(dT,_data) {
    const entries = [...dT.items].map(item => {
        return item.webkitGetAsEntry ? item.webkitGetAsEntry() : null;
      })
      .filter(entry => entry);
    if (entries.length) {
      makedir(entries).then(function(system_trees){
          var files = exactFile(system_trees, "", []);
          c(_data, files);
      }).catch(function(){
          var files = dT.files;
          c(_data, files);
      });
    } else {
          var files = dT.files;
          c(_data, files);
    }
  };

• Der 'dT' ist drop Ereignis (e.originalEvent.dataTransfer) und '_data', das ist Ajax-upload-Formular Einreichen.

• Benötigen Sie auch eine upload-Bibliothek oder schreiben Sie es von sich selbst zu senden, um die Datei in den server per ajax hochladen. Im code-Beispiel oben verwende ich formstone hochladen Bibliothek (https://formstone.it/components/upload/)

• Auf server-Seite: Sie müssen zur Verarbeitung der Formular-Daten, die gesendet wurde, von der JS-Seite, al den meisten Fällen müssen Sie die Prozess-Datei, indem Sie Datei mit dem relativen Pfad beiliegenden info aus dem File-Objekt.

• Noch eine Anmerkung, setzen Sie einfach "multiple" - Attribut bei der Datei-upload-Eingang, KEINE Notwendigkeit, eine 'webkitdirectory' oder 'Verzeichnis'. Sie verursacht die Benutzer können nicht wählen Sie die Datei (nur Ordner erlaubt)

• Dem Ergebnis, das Sie haben mit dem Upload-system unterstützt alle Ordner und Dateien behalten Ihre Struktur wie Google Drive :).

• Gibt es das tool ( https://freetoolonline.com/zip-file.html ), dass ich schrieb, dass unterstützt Ordner-upload basiert auf dem ideal, habe ich oben erläutert.