Wie erhalte ich ein Ordnerverzeichnis vom HTML-Eingabetyp "Datei" oder auf andere Weise?

70

Ich habe also eine grundlegende Formulareingabe mit dem Typ, "file"möchte jedoch, dass der Benutzer einen Ordner und keine Datei auswählen kann.

Wie kann ich mit dieser Eingabe einen Ordner und keine Datei auswählen, oder gibt es eine andere Möglichkeit, dies zu tun?

html file input directory Ben
quelle
Warum sollten Sie den Ordner speichern?
hjpotter92
3
Versuchen Sie, alle Dateien im ausgewählten Ordner hochzuladen?
Parag Meshram
1
Die Frage ist, was würden Sie mit dem Ordner machen, wenn Sie ihn haben? Möchten Sie alle Dateien im Ordner hochladen? Oder etwas anderes mit dem Ordner machen? Der Browser kann normalerweise nichts direkt mit dem Ordner tun. Wenn Sie also nicht planen, den Inhalt hochzuladen, ist es nicht logisch, den Ordner angeben zu wollen.
Spudley
Ok, im Grunde genommen habe ich ein PHP-Skript, das ein Array aller Bilddateien erstellt, die sich in einem Ordner befinden, und ich möchte eine Art Auswahlprozess für den Benutzer erstellen, um auszuwählen, in welchem ​​Ordner das Skript ausgeführt werden soll. Das PHP-Skript erstellt dann ein Array von Bilddateien und zeigt alle Bilder auf einer Webseite an. Klingt jetzt nach einer schlechten Idee, aber es ist sinnvoll, dies zu tun.
Ben
Vorschlag zum Hochladen von Verzeichnissen: wicg.github.io/directory-upload/proposal.html
Miscreant

Antworten:

70

Stolperte auch auf dieser Seite und fand dann heraus, dass dies nur mit Javascript (keine Plugins wie ActiveX oder Flash) möglich ist, aber nur in Chrome:

https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3

Grundsätzlich haben sie die Unterstützung für ein neues Attribut im Dateieingabeelement "webkitdirectory" hinzugefügt. Sie können es so verwenden:

<input type="file" id="ctrl" webkitdirectory directory multiple/>

Hier können Sie Verzeichnisse auswählen. Das Attribut multiple ist ein guter Fallback für Browser, die die Auswahl mehrerer Dateien, jedoch nicht die Verzeichnisauswahl unterstützen.

Wenn Sie ein Verzeichnis auswählen, sind die Dateien über das dom-Objekt für das Steuerelement (document.getElementById ('ctrl')) verfügbar, genau wie sie es mit dem Attribut multiple tun. Der Browser fügt rekursiv alle Dateien im ausgewählten Verzeichnis zu dieser Liste hinzu.

Sie können das Verzeichnisattribut auch bereits hinzufügen, falls dies irgendwann standardisiert wird (es wurden keine Informationen dazu gefunden).

Bwindels
quelle
5
Beachten Sie jedoch, dass dies die Möglichkeit der Auswahl einzelner Dateien blockiert. Aktuell können Dateien und Verzeichnisse nur mithilfe von Standardmethoden (ohne Flash, ohne Silverlight usw.) ausgewählt werden, indem zwei separate Eingabeelemente bereitgestellt werden.
Nikolay Melnikov
3
@ NikolayMelnikov oder per Drag & Drop
antonj
Wie kann ich dafür sorgen, dass mehrere Dinge akzeptiert werden, einschließlich Dateien und Ordner?
Casper
1
Ich würde mich nicht darauf verlassen, da ich kein solches directoryAttribut in der Live-HTML-Spezifikation html.spec.whatwg.org/multipage/input.html#the-input-element
Xenos
1
Es sieht so aus, als ob es von den wichtigsten Desktop-Browsern unterstützt wird: caniuse.com/#feat=input-file-directory
RaschidRafaelly
1

Sie möchten höchstwahrscheinlich ein Flash- / Silverlight- / ActiveX-Steuerelement verwenden. Die <input type="file" />Steuerung kümmert sich nicht darum.

Wenn es Ihnen nichts ausmacht, dass der Benutzer eine Datei als Mittel zum Abrufen des Verzeichnisses auswählt, können Sie möglicherweise an das changeEreignis dieses Steuerelements binden, dann den Dateinamen entfernen und den Pfad irgendwo speichern - aber das ist ungefähr so ​​gut wie es nur geht.

Beachten Sie, dass Webseiten für die Interaktion mit Servern ausgelegt sind. Nichts an der Bereitstellung eines lokalen Verzeichnisses für einen Remote-Server ist "typisch" (ein Server kann nicht darauf zugreifen, warum also danach fragen?). Dateien sind jedoch ein Mittel zur selektiven Weitergabe von Informationen.

Brad Christie
quelle
-3

Obwohl es eine alte Frage ist, kann dies jemandem helfen.

Wir können mehrere Dateien auswählen, während wir mit "multiple" nach einer Datei suchen.

<input type="file" name="datafile" size="40"  multiple>
Sai
quelle
2
Bezieht sich nicht wirklich auf die Frage.
Madc