Auflisten von Dateien eines Verzeichnisses auf einer Webseite

Wenn Sie Apache als Webserver verwenden und mod-autoindex für das Verzeichnis, in dem Sie PDF-Dateien hochladen, konfiguriert haben, sollten Sie vor der Navigation zu dieser URL Folgendes sehen:

Diese automatisch generierte Seite kann von js mit jquery leicht analysiert werden:

var pdfFilesDirectory = '/uploads/pdf/';

// get auto-generated page 
$.ajax({url: pdfFilesDirectory}).then(function(html) {
    // create temporary DOM element
    var document = $(html);

    // find all links ending with .pdf 
    document.find('a[href$=.pdf]').each(function() {
        var pdfName = $(this).text();
        var pdfUrl = $(this).attr('href');

        // do what you want here 
    })
});

Sei einfach. Legen Sie alle Ihre Dateien in einem Verzeichnis ab und erstellen Sie keine Startseite dieses Verzeichnisses. Fügen Sie dann auf der gewünschten Seite ein Iframe hinzu, das dieses Verzeichnis anzeigt. Dann sehen Sie die Liste der hochgeladenen Dateien, alle in Hyperlinks. Wenn Sie auf die Links klicken, zeigt das Iframe die PDF -Dateien an. 

Sie benötigen eine serverseitige Implementierung. Sie können dies beispielsweise mit PHP tun. Mit JavaScript ist dies nicht möglich, da es auf der Clientseite ausgeführt wird und nicht auf die Dateien auf dem Server zugreifen kann.

Sie benötigen eine Kombination aus Javascript und PHP. Sie können die PHP -Datei über Javascript aufrufen, indem Sie einen Aufruf von AJAX verwenden Versuchen Sie diese PHP -Datei, die ein Json-Objekt zurückgeben soll:

$directory = "/directory/path";
$pdffiles = glob($directory . "*.pdf");

$files = array();

foreach($pdffiles as $pdffile)
{
   $files[] = "<a href=$pdffile>".basename($pdffile)."</a>";
}

echo json_encode($files);

Jetzt müssen Sie nur noch das Json-Objekt durchlaufen, um die URLs aufzulisten.

So etwas wie:

$.getJSON( "file.php", function( data ) {
  var items = [];
  $.each( data, function(val ) {
    items.Push(val);
  });

  $( "body" ).append( items );
});

Ich habe es nicht getestet, aber so etwas sollte funktionieren.

Ich habe ein Knotenmodul erstellt, um das Abrufen aller Dateien und Ordner zu automatisieren: mddir

Verwendungszweck

knoten mddir "../relative/path/"

Zur Installation: npm install mddir -g

So erstellen Sie einen Abzug für das aktuelle Verzeichnis: mddir

Für jeden absoluten Pfad generieren: mddir/absolute/path

Für einen relativen Pfad generieren: mddir ~/Documents/was auch immer.

Die md-Datei wird in Ihrem Arbeitsverzeichnis generiert.

Ignoriert derzeit die node_modules- und .git-Ordner.

Fehlerbehebung

Wenn Sie den Fehler "node\r: Keine solche Datei oder ein solches Verzeichnis" erhalten, besteht das Problem, dass Ihr Betriebssystem andere Zeilenenden verwendet und mddir diese nicht analysieren kann, ohne dass Sie den Zeilenendestil explizit auf Unix setzen. Dies betrifft normalerweise Windows, aber auch einige Linux-Versionen. Das Einstellen des Zeilenendes auf den Unix-Stil muss im globalen Ordner "mddir npm" erfolgen.

Zeilenenden fixieren

Npm bin-Ordnerpfad abrufen mit:

npm config get prefix

CD in diesen Ordner

brühen Sie installieren dos2unix

dos2unix lib/node_modules/mddir/src/mddir.js

Dies konvertiert Zeilenenden in Unix anstelle von Dos

Führen Sie dann wie üblich den folgenden Befehl aus: Knoten mddir "../relative/path/".

Ich habe einen weiteren Knotenmodulaufruf agd ausgeführt, um eine Baumansicht basierend auf dem anderen Modul zu generieren: https://github.com/JohnByrneRepo/agd .

Automatisch generierte Dokumentation (Alpha)

Funktionalität bisher:

Erzeugt im Knoten eine Baumordnerstruktur, die im Browser als Baumstruktur dargestellt wird. Klicken Sie auf eine Datei (keine Root-Ebene), um die Hauptansicht zu füllen.

Demnächst:

Erzeugt ein Dokumentationshandbuch mit Funktionsnamen und Parametern, Funktionsabhängigkeiten und mehr. Anfangs mit jQuery und normalem JavaScript-Funktions-Namespacing kompatibel, bald auf Anfrage mit React, Redux, Angular 1, Angular 2 und anderen Frameworks kompatibel.

Verwendungszweck

knoten agd relativePath

z.B. Knoten agd '../../'

Erzeugter code.json.

Starten Sie 'node http-server' und öffnen Sie den Browser, um die in der Seitenleiste gerenderte Dateistruktur anzuzeigen. Für das Rendern größerer Projekte kann es ein bis zwei Minuten dauern.

Siehe code.json zum Beispiel für generierte Daten.

Aufgabe: Fügen Sie Code-Inhalt für Dateien der obersten Ebene hinzu. Verschieben Sie die Baum-HTML-Erzeugung in den Knoten.

Wenden Sie sich an [email protected]

MIT-Lizenz

Beispiel generierte Baumstruktur

Anstelle von JavaScript, das nur auf der Clientseite ausgeführt wird, sollten Sie die Verwendung von PHP oder einer anderen Serversprache in Betracht ziehen, um Ihr Verzeichnis der Dateien zu durchsuchen und in einer HTML-Datei/Vorlage aufzulisten. PHP hat beispielsweise eine Scandir-Funktion, die Dateien in einem Verzeichnis auflisten kann

1. Öffnen Sie einen Browser
2. Navigieren Sie zu dem Ordner, den Sie auflisten möchten
3. Wenn Sie eine Liste der Dateien sehen, fahren Sie mit .__ fort.
   • Wenn Sie not eine Liste der Dateien sehen, sehen Sie sich Folgendes an: Ist es möglich, eine Liste von Dateien unter einem Verzeichnis einer Website zu erhalten? Wie? um herauszufinden, wie das geht.
4. Einen Ajax-Aufruf für diesen Ordner durchführen (Beispiel unten)
5. response ist das HTML der Listenseite
6. Sie können das analysieren, um die Dateiliste zu erhalten

Beispiel:

// This is in angular, but you can use whatever
$http.get('folder_to_list/').success(function(response) {
    console.log(response);
});