Pregunta Listar archivos en un directorio usando html [cerrado]


¿Cómo puedo listar los archivos contenidos en un directorio usando HTML? En otras palabras, quiero enumerar los archivos en un directorio y mostrarlos en un navegador.


5
2017-10-19 16:02


origen


Respuestas:


Respuesta corta:

No.

Respuesta un poco más larga:

Esto no es un problema de HTML, sino uno de configuración de servidor web. Puede configurar un servidor web para mostrar los contenidos del directorio, siempre que el navegador web pueda acceder al directorio.

Si no es así, deberá usar algún tipo de lenguaje del lado del servidor para leer el directorio y enumerar los contenidos en el navegador (aunque aún necesitará asegurarse de tener los permisos adecuados para que esto funcione).


4
2017-10-19 16:04



Dependiendo de la configuración de su servidor (todavía tiene que haber una manera de permitir la exploración de directorios para un directorio determinado, usar este truco), hay una manera de obtener una lista para que se vea como usted quiere, pero requiere un poco más trabajo (como lo mencionó Quentin) para obtener un estilo de la manera que lo desee.

En este ejemplo, estoy usando jQuery, KnockoutJS y CSS para leer los contenidos de un directorio (no estoy haciendo ningún truco especial del lado del servidor ... este es el modo de listado de directorios predeterminado del servidor Apache que devuelve la página de lista de directorios ) Puse esto en una página HTML5 muy básica. Estaba teniendo problemas para hacer mis primeros intentos de trabajar (donde simplemente estaba creando elementos sobre la marcha y agregándolos a una lista), ya que, por algún motivo, no daban estilo. Como estoy tratando de aprender más sobre el uso de Knockout, de todos modos, esto parecía un caso de prueba decente.

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

Sin embargo, como Knockout probablemente también sea excesivo para esto, tengo una muestra que funciona con jQuery antiguo "simple", aquí: http://murphy.jascot.org/tests/dirlist-noko.html

Extraje el código no basado en Knockout, a continuación:

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>

Obviamente, lo que analiza en su método getFiles dependerá del marcado que su servidor particular utiliza al enumerar los contenidos de un directorio, por lo que tendrá que adaptarse a su propio caso.

Además, la mayor parte de esto puede ser irrelevante, si tiene acceso y está dispuesto a aprender un lenguaje o marco del lado del servidor, como Python, Ruby on Rails, PHP o Perl. Pero, este fue un caso de prueba divertido para jugar, para mí, ¡así que ahí lo tienes! :)


4
2017-10-22 15:30