使用html列出目录中的文件

Question

如何使用HTML列出目录中包含的文件？换句话说，我想列出目录中的文件并在浏览器中显示它们。

Answer 1

简短的回答：

号

稍长的答案：

这不是一个HTML的问题，但Web服务器配置之一。只要目录是Web浏览器可以访问的目录，就可以配置Web服务器以显示目录内容。

如果不是，您将需要使用某种服务器端语言来读取目录并将内容列出到浏览器（尽管您仍然需要确保适当的权限才能使其工作）。

Answer 2

根据您的服务器设置（您仍然必须有一种方法来允许给定目录的目录浏览，使用这个技巧），有一种方法可以让列表看起来像你想要的那样，但它确实需要更多的工作（比如昆汀提到的）才能以你想要的方式获得一些风格。在这个例子中，我使用jQuery，KnockoutJS和CSS来读取目录的内容（我没有做任何服务器端的特殊技巧......这是我的Apache服务器的默认目录列表模式返回目录列表页面）。我把它放到一个非常基本的HTML5页面中。我之前尝试工作时遇到了一些麻烦（我只是简单地创建元素并将它们添加到列表中），因为某些原因，它们不会起作用。无论如何，我试图更多地了解如何使用Knockout，这似乎是一个体面的测试案例。

随着淘汰赛： http://murphy.jascot.org/tests/dirlist.html

然而，随着淘汰赛大概也是矫枉过正这一点，我有与“普通”*Query的，在这里工作的样品： 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）并且愿意学习，那么大多数情况下都可以做到毫无意义。但是，对我来说，这是一个有趣的测试案例，所以你有它！ :)