Lista plików w katalogu przy użyciu html

Question

Jak mogę wyświetlić listę plików zawartych w katalogu przy użyciu HTML? Innymi słowy, chcę wyświetlić listę plików w katalogu i pokazać je w przeglądarce.

Answer 1

Krótka odpowiedź:

nr

Nieco dłużej odpowiedź:

To nie jest kwestia HTML, ale jedna z konfiguracji serwera WWW. Możesz skonfigurować serwer WWW tak, aby wyświetlał zawartość katalogu, o ile katalog jest dostępny dla przeglądarki internetowej.

Jeśli tak nie jest, musisz użyć jakiegoś języka po stronie serwera, aby odczytać katalog i wyświetlić zawartość przeglądarki (chociaż nadal potrzebujesz odpowiednich uprawnień, aby to działało).

Answer 2

W zależności od ustawień serwera (nadal musisz mieć możliwość zezwolenia na przeglądanie katalogu dla danego katalogu, aby użyć tej sztuczki), istnieje sposób na sprawdzenie, czy aukcja wygląda tak, jak chcesz, ale wymaga trochę więcej pracy (jak wspomniano w Quentin), aby uzyskać styl w pożądany sposób.

W tym przykładzie używam jQuery, KnockoutJS i CSS do odczytu zawartości katalogu (nie robię żadnych specjalnych sztuczek po stronie serwera ... jest to domyślny tryb listy katalogów serwera Apache, zwracający strona listy katalogów). Wstawiłem to na bardzo podstawową stronę HTML5. Miałem problemy z uzyskaniem wcześniejszych prób pracy (gdzie po prostu tworzyłem elementy w locie i dodawałem je do listy), ponieważ z jakiegoś powodu nie byłyby w stylu. Ponieważ staram się dowiedzieć więcej o używaniu Knockout, w każdym razie, to wydawało się przyzwoitą próbą.

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

Jednakże, jak Knockout jest prawdopodobnie overkill dla tego, mam próbkę, która współpracuje z "prostym" starej jQuery, tutaj: http://murphy.jascot.org/tests/dirlist-noko.html

mam zaczerpnięte non-Knockout kod oparty poniżej:

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> 

Oczywiście, czego analizować w sposób GetFiles zależy od znaczników że konkretny serwer używa podczas wyświetlania zawartości katalogu, dlatego że będą musiały zostać dostosowane do twojej własnej sprawy.

Ponadto, większość z tego może być dyskusyjna, jeśli masz dostęp i chęć uczenia się języka lub struktury po stronie serwera, takich jak Python, Ruby on Rails, PHP lub Perl. Ale to była zabawna próba, żeby się bawić, dla mnie, więc masz ją! :)