Dateien in einem Verzeichnis mithilfe von HTML auflisten

Question

Wie kann ich Dateien in einem Verzeichnis mithilfe von HTML auflisten? Mit anderen Worten, ich möchte Dateien in einem Verzeichnis auflisten und sie in einem Browser anzeigen.

Answer 1

Kurze Antwort:

Nr

Etwas längere Antwort:

Dies ist kein HTML-Ausgabe, aber eine Web-Server-Konfiguration. Sie können einen Webserver so konfigurieren, dass der Verzeichnisinhalt angezeigt wird, sofern es sich um ein Verzeichnis handelt, auf das der Webbrowser zugreifen kann.

Wenn dies nicht der Fall ist, müssen Sie eine serverseitige Sprache verwenden, um das Verzeichnis zu lesen und den Inhalt im Browser aufzulisten (obwohl Sie trotzdem die entsprechenden Berechtigungen dafür benötigen).

Answer 2

Abhängig von Ihren Servereinstellungen (Sie müssen immer noch die Möglichkeit haben, das Durchsuchen eines bestimmten Verzeichnisses zu erlauben, um diesen Trick zu verwenden), gibt es eine Möglichkeit, einen Eintrag so aussehen zu lassen, wie Sie ihn haben wollen erfordert etwas mehr Arbeit (wie Quentin erwähnt), um etwas Stil zu bekommen, wie Sie es wollen.

In diesem Beispiel verwende ich jQuery, KnockoutJS und CSS, um den Inhalt eines Verzeichnisses zu lesen (ich mache keine serverseitigen Spezialtricks ... das ist der Standardverzeichnis-Listenmodus meines Apache-Servers Verzeichnislisten-Seite). Ich habe dies in eine sehr einfache HTML5-Seite eingefügt. Ich hatte einige Probleme damit, meine früheren Arbeitsversuche zu bekommen (wo ich einfach Elemente im laufenden Betrieb erstellte und sie zu einer Liste hinzufügte), da sie aus irgendeinem Grund nicht stylen würden. Als ich versuchte, mehr über die Verwendung von Knockout zu erfahren, schien das jedenfalls ein anständiger Testfall zu sein.

Mit Knockout: http://murphy.jascot.org/tests/dirlist.html

jedoch als Knockout wahrscheinlich auch Overkill dafür ist, habe ich eine Probe, die mit "plain" alten jQuery funktioniert, hier: http://murphy.jascot.org/tests/dirlist-noko.html

ich exzerpiert habe die nicht-Knockout-basierter Code unten:

HTML

<h1>Testing...</h1> 

    <button id="btnGet">.get</button> 

    <div class="shell"> 
     <!-- This is the place we're going to build our list --> 
     <ul></ul> 
    </div> 

CSS

<style type="text/css"> 
        /* Obviously, none of this is necessary... 
         this is just to show that it can be done ... 
         I'm just putting some basic style on my shell 
         class, and the li's and a's within */ 
     .shell { 
      width:300px;  
     } 

     .shell ul li { 
      list-style:none;  
     } 

     .shell a { 
      color: #232323; 
      display: block; 
      width: 100%; 
      height:30px; 
      margin: .5em 0; 
      background: #CFC; 
      padding: 5px 10px; 
      font-weight:bold; 
      border: 1px solid #999; 
      border-radius: 3px; 
      text-decoration:none; 
     } 
    </style> 

Javascript

<!-- Get us some jQuery goodness! --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(function(){ 
      // Setup our method to retrieve the file list 
    var getFiles = function(){ 
     // Call the /dl/ directory, which should serve 
     // back the directory-listing default page 
     // NOTE: This WILL NOT work if you have your server's 
     // default index/home page in this folder, as that will 
     // be returned instead of a directory listing! 
     $.get("/dl/", function(data) { 
      // get a reference to the ul I want to populate 
      var $s = $(".shell ul"); 
      // get a list of a tags from the returned data 
      var links = $(data).find("a"); 
      // for each item in links... 
      links.each(function(){ 
       // extract the href attr 
       var href = $(this).attr("href"); 
       // filter out any links you don't want to display... 
            // in this case, I didn't want to display the 
            // sort-links and any links starting with a/
       if(href.charAt(0) != "?" && href.charAt(0) != "/"){ 
        // append a new li with an anchor tag inside 
              // it that has the href, and the link's text 
        $s.append("<li><a href=\"" + href + "\">" + 
                 $(this).text() + "</a></li>"); 
        } 
       }); 
      }); 
     }; 
      // assign my click handler to #btnGet 
    $("#btnGet").click(getFiles); 
     }); 
    </script> 

Offensichtlich was Sie in Ihrem GetFiles Methode analysieren wird auf dem Markup abhängen, die Ihren speziellen Server verwendet, wenn den Inhalt eines Verzeichnisses Verzeichnis, so dass muss an Ihren eigenen Fall angepasst werden.

Auch das meiste davon kann machbar gemacht werden, wenn Sie Zugriff auf und eine Lernbereitschaft haben, eine serverseitige Sprache oder ein Framework wie Python, Ruby on Rails, PHP oder Perl. Aber das war ein lustiger Testfall mit mir zu spielen, also habt ihr es! :)