How can I iterate through all elements of local (server-side) folder?

Basically, I have a very simple website where the root directory looks like:

/images/
index.html
stuff.js

JavaScript
​x
 
/images/
index.html
stuff.js
​

I want some way to recursively iterate through every file in the /images/ directory and display them in order in a section of my website. So for example, if /images/ contained:

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

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

then somewhere in index.html would contain:

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

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

My first idea was to do this using the document.write() function in stuff.js, but I couldn’t find a good way to iterate through the local file directory in Javascript. I saw something about AJAX, but all of those examples involved editing an existing file, which I obviously don’t want to do.

My current solution is just to manual create an array of strings containing all of the files in /images/, but doing this makes me think “There’s got to be a better way!”

Let me know if I’ve been unclear.

Thanks!

Answer

Perhaps the best way to do this is to use a server-sided language to do it for you, and to use an asynchronous Javascript request to display the data.

This sample uses PHP to list all the files in a specified directory, and an xmlhttprequest to load this output and convert the results into image tags:

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);

?>

JavaScript
 
<?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 (same directory as 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>

JavaScript
 
<!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>
​

Note that this is only an example. You’ll probably want to make sure that the AJAX call is successful, and that the JSON conversion works both in the server code and on the client.

Advertisement

Answer