Básicamente, tengo un sitio web muy simple donde el directorio raíz se parece a:

/images/
index.html
stuff.js

Quiero de alguna manera de forma recursiva iterar a través de cada archivo en el directorio imágenes y mostrarlas en orden en una sección de mi sitio web. Así, por ejemplo, si /images/contenidos:

images/a/a.png
images/b.png
images/c.jpg
....

entonces en algún lugar en index.html de contener:

<img src="images/a/a.png" />
<img src="images/b.png" />
<img src="images/c.jpg" />
....

Mi primera idea fue hacer esto utilizando el documento.write() de la función en stuff.js, pero no pude encontrar una buena manera de recorrer el local del directorio de archivos en Javascript. Vi algo acerca de AJAX, pero todos los ejemplos que participan de la edición de un archivo existente, que yo, obviamente, no quieren hacer.

Mi solución actual es sólo para manual de crear una matriz de cadenas que contiene todos los archivos en /imágenes/, pero haciendo esto me hace pensar que «tiene que haber una mejor manera!»

Hágamelo saber si he sido claro.

Gracias!

  • La mejor manera es crear un webservice que comprueba el contenido de cualquier directorio y devuelve un array…que se puede llamar a través de AJAX
  • Si está utilizando «javascript» y «file I/O» en la misma frase, estamos hablando de nodo, no del lado del cliente JS.
InformationsquelleAutor ScoWalt | 2012-11-27

2 Comentarios

  1. 6

    Tal vez la mejor manera de hacer esto es utilizar un servidor cara lenguaje para hacer esto para usted, y para utilizar un Javascript asíncrono petición para mostrar los datos.

    Este ejemplo utiliza PHP para mostrar todos los archivos en un directorio especificado, y un xmlhttprequest para cargar esta salida y convertir los resultados en etiquetas de imagen:


    getimages.php:

    <?php
    
        //The directory (relative to this file) that holds the images
        $dir = "Images";
    
    
        //This array will hold all the image addresses
        $result = array();
    
        //Get all the files in the specified directory
        $files = scandir($dir);
    
    
        foreach($files as $file) {
    
            switch(ltrim(strstr($file, '.'), '.')) {
    
                //If the file is an image, add it to the array
                case "jpg": case "jpeg":case "png":case "gif":
    
                    $result[] = $dir . "/" . $file;
    
            }
        }
    
        //Convert the array into JSON
        $resultJson = json_encode($result);
    
        //Output the JSON object
        //This is what the AJAX request will see
        echo($resultJson);
    
    ?>

    index.html (mismo directorio getimages.php):

    <!DOCTYPE html>
    <html>
        <head>
            <title>Image List Thing</title>
        </head>
        <body>
    
            <div id="images"></div>
            <input type="button" onclick="callForImages()" value="Load" />
    
            <script>
    
                //The div element that will contain the images
                var imageContainer = document.getElementById("images");
    
    
    
                //Makes an asynch request, loading the getimages.php file
                function callForImages() {
    
                    //Create the request object
                    var httpReq = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
    
                    //When it loads,
                    httpReq.onload = function() {
    
                        //Convert the result back into JSON
                        var result = JSON.parse(httpReq.responseText);
    
                        //Show the images
                        loadImages(result);
                    }
    
                    //Request the page
                    try {
                        httpReq.open("GET", "getimages.php", true);
                        httpReq.send(null);
                    } catch(e) {
                        console.log(e);
                    }
    
                }
    
    
                //Generates the images and sticks them in the container
                function loadImages(images) {
    
                    //For each image,
                    for(var i = 0; i < images.length; i++) {
    
                        //Make a new image element, setting the source to the source in the array
                        var newImage = document.createElement("img");
                        newImage.setAttribute("src", images[i]);
    
                        //Add it to the container
                        imageContainer.appendChild(newImage);
    
                    }
    
                }
    
                </script>
    
        </body>
    </html>

    Tenga en cuenta que esto es sólo un ejemplo. Usted probablemente querrá asegurarse de que la llamada AJAX es un éxito, y que el JSON de conversión de las obras tanto en el código del servidor y en el cliente.

    • Muchas gracias por esto! Muy apreciado. Una pregunta rápida: me gustaría que todo esto ocurra de forma automática. Por ejemplo: <body onload=»init()»> donde la primera línea de init() es una llamada a callForImages(). Voy a ejecutar en sincronía problemas con esto? I. E. el código de cliente que realiza la llamada antes de que el servidor de código tiene toda la información a la mano.
    • Puede invocar callForImages tanto como te gusta y que no se debería correr cualquier tipo de problemas. Sin embargo, usted puede ser que desee para limpiar el contenedor div elemento siempre está la actualización de la misma. Una rápida desordenado manera de hacerlo es establecer su innerHTML = "".
    • Una cosa que usted podría desear cambiar, en el archivo php: switch(ltrim(strstr($archivo, ‘.’), ‘.’)) { para cambiar(strtolower(ltrim(strstr($archivo, ‘.’), ‘.’))) { a continuación, se va a recoger .JPG .Los archivos Jpeg, no sólo los de .jpeg.
  2. 1

    Me topé con este artículo, ya que yo estaba buscando lo mismo, ¿cómo iterar a través de una lista de archivos en un «Recursos» de la carpeta, y mostrar una página web con los enlaces de accesos directos a cada uno de ellos.

    Aquí está un clip de la página web terminé con:

    HTML/Javascript: Recorrer todos los elementos de local (server-side) de la carpeta

    Aquí es como yo lo hice.

    He añadido un muy simple ASP.Net de servicio, para iterar a través de los archivos en esta carpeta…

    List<OneResourceFile> listOfFilenames = new List<OneResourceFile>();
    
    string Icon = "";
    string localFolder = Server.MapPath("../Resources");
    string[] fileEntries = Directory.GetFiles(localFolder);
    foreach (string fileName in fileEntries)
    {
        string filename = System.IO.Path.GetFileName(fileName);
        switch (Path.GetExtension(filename).ToLower())
        {
            case ".pptx":
            case ".ppt":
                Icon = "cssPowerPoint";
                break;
            case ".doc":
            case ".docx":
                Icon = "cssWord";
                break;
            case ".xlsx":
            case ".xlsm":
            case ".xls":
                Icon = "cssExcel";
                break;
            default:
                Icon = "cssUnknown";
                break;
        }
        OneResourceFile oneFile = new OneResourceFile()
        {
            Filename = filename,
            IconClass = Icon,
            URL = "../Resources/" + filename
        };
        listOfFilenames.Add(oneFile);
    }
    
    string JSON = JsonConvert.SerializeObject(listOfFilenames);
    return JSON;

    ..que construyó una Lista de OneResouceFile registros, cada uno con un nombre de archivo, una Clase CSS a aplicar a ese acceso directo (lo que le daría, por ejemplo, un icono de Excel, un icono de PDF, etc) y una dirección URL completa del elemento.

    public class OneResourceFile
    {
        public string Filename { get; set; }
        public string IconClass { get; set; }
        public string URL { get; set; }
    }

    ..y que devuelve un JSON conjunto de resultados como este…

    [
        {
            Filename: "Mikes Presentation.pptx",
            IconClass: "cssPowerPoint",
            URL: "~/Resources/Mikes Presentation.pptx"
        },
        {
            Filename: "Mikes Accounts.xlsx",
            IconClass: "cssExcel",
            URL: "~/Resources/Mikes Accounts.xlsx""
        }
    ]

    Entonces, me acabo de algunas de JQuery para llamar a este servicio web, y crear un a href para cada elemento en los resultados:

    <script type="text/javascript">
        var URL = "/GetListOfResourceFiles.aspx";   // This is my web service
        $.ajax({
            url: URL,
            type: 'GET',
            cache: false,
            dataType: "json",
            success: function (JSON) {
                //We've successfully loaded our JSON data
                $.each(JSON.Results, function (inx) {
    
                    //Create one <a href> per JSON record, and append it to our list.
                    var thelink = $('<a>', {
                        text: this.Filename,
                        title: this.Filename,
                        href: this.URL,
                        class: this.IconClass
                    }).appendTo('#ListOfResources');
                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("$.ajax error: " + xhr.status + " " + thrownError);
            }  
        });
    </script>
    
    <p id="ListOfResources">

    Todo lo que necesita es añadir algo de estilo CSS para cssPowerPoint, cssExcel, etc, para dar la a hrefs un icono correspondiente, por ejemplo:

    .cssPowerpoint
    {
        vertical-align: top;
        text-align: center;
        background-repeat: no-repeat;
        background-position: center 5px;
        background-image: url(/Images/Icons/icnPowerPoint.png);
        width: 100px;
        height: 60px;
        padding-top: 60px;
        text-decoration: none;
        display:inline-block;
        color: #666;
        margin-left: 20px;
    }

    Y eso es todo. Genial, eh ?

Dejar respuesta

Please enter your comment!
Please enter your name here