Question

73

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

rated 0 times [ 75] [ 2] / answers: 1 / hits: 18061 / 12 Years ago, tue, november 27, 2012, 12:00:00

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

/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

....

then somewhere in index.html would contain:

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kiyam

Add To Favorites

Follow

Total Points: 448

Total Questions: 96

Total Answers: 92

Location: Philippines

Member since Sat, Jul 11, 2020

4 Years ago

answered 12 Years ago carlo · Accepted 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);



?>

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>

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.