htmlを使用してディレクトリ内のファイルを一覧表示する

Question

HTMLを使用してディレクトリに含まれるファイルを一覧表示するにはどうすればよいですか？言い換えれば、ディレクトリにファイルをリストしてブラウザに表示したいのです。

Answer 1

短い答え：

これは、HTMLの問題ではありませんが、Webサーバの設定の1：

少し長い答え

号。ディレクトリがWebブラウザがアクセスできるディレクトリであるかぎり、ディレクトリの内容を表示するようにWebサーバを設定できます。

もしそうでなければ、ディレクトリを読み込んで内容をブラウザに一覧表示するために、何らかのサーバサイド言語を使用する必要があります（ただし、これを行うには適切な権限が必要です）。

Answer 2

あなたのサーバーの設定によっては（このトリックを使用するためには、特定のディレクトリのディレクトリブラウズを許可する方法が必要です）、あなたが望むようにリストを取得する方法はありますが、あなたが望むようなスタイルを得るためには、（クエンティンの言われたような）もっと仕事が必要です。

この例では、ディレクトリの内容を読み取るためにjQuery、KnockoutJS、CSSを使用しています（サーバーサイドの特別なトリックはしていません...これはApacheサーバーのデフォルトのディレクトリリストモードです。ディレクトリリストページ）。私はこれを非常に基本的なHTML5ページに入れました。私は以前の仕事の試み（単純に素早く要素を作成してリストに追加していたところ）を何らかの理由で取り除くのに苦労していました。とにかく、Knockoutの使い方についてもっと学びたいので、これはまともなテストケースのようです。ノックアウトで

： http://murphy.jascot.org/tests/dirlist.html

ノックアウトこのため、おそらくも過剰であるし​​かし、私はここでは「プレーン」古い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などのサーバー側の言語やフレームワークにアクセスして学習する意欲があるならば、ほとんどの場合それは疑わしいものになります。しかし、これは楽しいテストケースでした。私のために、あなたはそれを持っています！ :)