Wir verwenden jquery fileupload, um Dateien (und Ordner) von einem lokalen Computer in einen Browser zu ziehen und dort abzulegen. Dies funktioniert hervorragend, aber wir können die Verzeichnisstruktur der Dateien im Ordner nicht erfassen. Ich verstehe, warum dies (aus Sicherheitssicht und Javascript) nicht funktioniert, aber hat jemand irgendwelche Gedanken darüber, wie man das Gleiche am besten erreichen kann?

Auch hier möchte ich, dass mein Kunde (interne App) einen Ordner in meine Anwendung zieht und dort ablegt. Meine Anwendung kann die Liste der Dateinamen sehen und sie werden hochgeladen, aber ich möchte die Verzeichnisstruktur dieser Dateien für die Verwendung an anderer Stelle beibehalten. d.h. es ist wichtig für mich zu wissen, dass es aus dem Verzeichnis x / 1 / a stammt und nicht aus y / 2 / b.

Danke im Voraus!

4
Arthur Frankel 6 Dez. 2013 im 21:25

3 Antworten

Beste Antwort

Weitere Informationen hierzu finden Sie in der Unterstützung zum Hochladen von jquery-Dateien im Zusammenhang mit der Erwähnung von webkitdirectory durch @ Dead133 https://github.com/blueimp/jQuery-File-Upload/wiki / Browser-Unterstützung

"Es ist möglich, eine vollständige Ordnerstruktur auszuwählen, obwohl dies derzeit nur von Google Chrome unterstützt wird. Um diese Funktion zu aktivieren, müssen dem Dateieingabefeld die folgenden herstellerspezifischen Verzeichnisattribute hinzugefügt werden:"

<input type="file" name="files[]" multiple directory webkitdirectory mozdirectory>

Eine andere Low-Tech-Lösung wäre, dass Benutzer die Dateien komprimieren und hochladen, wobei jeder Ordner erhalten bleibt.

2
Mark Nadig 6 Dez. 2013 im 20:10

Sie können dies entweder mit einer benutzerdefinierten Implementierung der Dateisystem-API erreichen, die this oder einfach nur DropzoneJS und dann einen Algorithmus ähnlich dem folgenden um eine Hash-Map der Verzeichnisse und Dateien zu erstellen, die zu jedem Verzeichnis gehören. Ich habe unten einen Beispielcode eingefügt, der Sie in die richtige Richtung lenken soll.

        uploadFilesDepthFirst(folderId, folderInfo) {
            Object.keys(folderInfo.children).forEach(childFolderName => uploadFilesDepthFirst(folder.id, folderInfo.children[childFolderName]));
            folderInfo.files.map(file => uploadFile(folderId, file.file));
        }

        let fileList = files.map((file) => { return {path: file.fullPath, filename: file.name , file: file} });

        const hierarchy = {}; // {folder_name} = { name: <name of folder>, children: {...just like hierarchy...}, files: [] }
        // build tree
        fileList.map(file => {
            const paths = file.path.split('/').slice(0, -1);
            let parentFolder = null;
            // builds the hierarchy of folders.
            paths.map(path => {
                if (!parentFolder) {
                    if (!hierarchy[path]) {
                        hierarchy[path] = {
                            name: path,
                            children: {},
                            files: [],
                        };
                    }
                    parentFolder = hierarchy[path]
                } else {
                    if (!parentFolder.children[path]) {
                        parentFolder.children[path] = {
                            name: path,
                            children: {},
                            files: [],
                        };
                    }
                    parentFolder = parentFolder.children[path];
                }
            });
            parentFolder.files.push(file);
        });

        Object.keys(hierarchy).map(folderName => uploadFilesDepthFirst(parentId, hierarchy[folderName]));
0
CaseyC 20 Juli 2017 im 19:33

Datei-API: Verzeichnisse und System ist derzeit ein W3C-Arbeitsentwurf und funktioniert bereits im Webkit, in den neuesten Versionen von Chrome und Safari.

Es gibt ein schönes Beispiel für das Hochladen von Dateien. Sie können ein Verzeichnis in einer Dropdown-Liste anzeigen und dessen Struktur anzeigen: http://sapphion.com/2012/06/keep-directory- Struktur beim Hochladen /

Fantastisches HTML5rocks-Tutorial: http://www.html5rocks.com/en/tutorials/file/ Dateisystem / # toc-dir

1
Andrew Surzhynskyi 6 Dez. 2013 im 18:23