Список файлов в каталоге с помощью html

Question

Как я могу перечислить файлы, содержащиеся в каталоге, используя HTML? Другими словами, я хочу перечислить файлы в каталоге и показать их в браузере.

Answer 1

Короткий ответ:

No.

Слегка развернутый ответ:

Это не HTML вопрос, но один из конфигурации веб-сервера. Вы можете настроить веб-сервер для отображения содержимого каталога, если только каталог является тем, к которому может обращаться веб-браузер.

Если это не так, вам нужно будет использовать какой-либо серверный язык, чтобы прочитать каталог и перечислить содержимое браузера (хотя вам все равно потребуется обеспечить надлежащие разрешения для этого).

Answer 2

В зависимости от настроек вашего сервера (вы все же должны иметь возможность разрешить просмотр каталогов для данного каталога, чтобы использовать этот трюк), есть способ получить список, чтобы посмотреть, как вы его хотите, но он требует некоторой дополнительной работы (например, Квентина), чтобы получить какой-то стиль так, как вы этого хотите.

В этом примере я использую jQuery, KnockoutJS и CSS для чтения содержимого каталога (я не делаю никаких специальных трюков на стороне сервера ... это мой режим вывода списка каталогов Apache по умолчанию, возвращающий страница списка каталогов). Я помещаю это в очень базовую страницу HTML5. У меня были некоторые проблемы с моими прежними попытками работать (где я просто создавал элементы «на лету» и добавлял их в список), по какой-то причине они не будут стилизовать. Поскольку я пытаюсь узнать больше об использовании Knockout, так или иначе, это казалось приличным тестом.

С Нокаут: http://murphy.jascot.org/tests/dirlist.html

Однако, как Knockout, вероятно, также избыточна для этого у меня есть образец, который работает с "обычной" старой JQuery, здесь: http://murphy.jascot.org/tests/dirlist-noko.html

Я Извлеченный без Нокаут кода на основе ниже:

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> 

Очевидно, то, что вы разбираете в методе GetFiles будет зависеть от разметки, который использует ваш конкретный сервер при перечислении содержимого каталогов, так что должны быть адаптированы к вашему собственному делу.

Кроме того, большую часть этого можно сделать спорным, если у вас есть доступ к языку или инфраструктуре на стороне сервера, например, Python, Ruby on Rails, PHP или Perl. Но, это был забавный тестовый случай, чтобы поиграть, для меня, так что у вас его есть! :)