3

I want to display all images from a directory dynamically with the help of javascript. How can I do this?

gopi1410
  • 6,567
  • 9
  • 41
  • 75
Vivek Parikh
  • 627
  • 8
  • 18
  • 31
  • only possible if you already **know** the images in the directory. – ahren Jun 08 '12 at 05:16
  • As this is also tagged in php I am assuming you are working with it for your application. I am not a php programmer but I would imagine you would have to iterate over the directory with php and pass a collection to your client side using json at which point you could dynamically build image tags. I've done something similar with asp.net but you'll need a php coder to help you with syntax. – Jesse Carter Jun 08 '12 at 05:19
  • can we get the file names in a directory in javascript? – Vivek Parikh Jun 08 '12 at 05:21
  • sure you don't want to use php for this, seems the best option –  Jun 08 '12 at 05:21
  • @Vivek: Why is your question tagged with PHP? if you want to loop through files using javascript? I don't think so it is possible using client-side javascript. You definitely need to look into node.js which offers a method http://nodejs.org/docs/v0.3.1/api/fs.html#fs.readdir for the same. http://stackoverflow.com/questions/2727167/getting-all-filenames-in-a-directory-with-node-js – verisimilitude Jun 08 '12 at 05:21
  • @verisimilitude my first preference is using javascript only.if its not possible then i will go for php. – Vivek Parikh Jun 08 '12 at 05:22
  • @VivekParikh, basic php example below –  Jun 08 '12 at 05:25
  • HTML 5 also provides a FILE API (http://www.html5rocks.com/en/tutorials/file/dndfiles/) to iterate through files. you may look into this too. – verisimilitude Jun 08 '12 at 05:38

3 Answers3

4

I don't believe that it is possible, but if you make an AJAX request to an ASP.NET or PHP (or similar) page, they can list the files in the folder and return it for the Javascript to show.

The cross-domain policy obviously applies.

If you are using PHP, you should use recursion on directories to get the full file structure. PHP has a Scan Directory Function that you can use.

Basic code example:

function listdir($folder) {
    if (!is_dir($folder)) {
        return array(); //empty if not a folder
    }
    $return = scandir($folder);
    $subfolders = array();
    array_shift($return); //first two values are always .. & .
    array_shift($return);
    foreach ($return as $key => $value) {
        if (is_dir($value)) {
            unset($return[$key]);
            $subfolders[$value] = listdir($value); //recursively analyse the subdirectory
        }
    }
    return array_merge(array_values($return), $subfolders);

}

Note: This hasn't been tested, please tell me if it doesn't work.

Scott Stevens
  • 2,546
  • 1
  • 20
  • 29
2

Basic PHP example:

<?php

foreach(glob("/path/to/images/{*.gif,*.jpg,*.png,*.jpeg,*.bmp}", GLOB_BRACE) as $image){
    echo '<img src="'.$image.'">';
}
brasofilo
  • 25,496
  • 15
  • 91
  • 179
1

Doing this using purely javascript is not possible unless the directory has indexes or you know the file names beforehand. Still an alternative using php is as follows:

  • Send an ajax request to a php file with data as directory name

  • The PHP file then access the directory contents using opendir, readdir, scandir etc commands. See this SO question or this link for more details on reading a directory by php readdir/scandir commands or this(by glob)

  • The PHP file returns the file names (here image names) as a json object.

  • On the client side the ajax response comes as the json object.

  • Done! You have all the images in that folder.

Community
  • 1
  • 1
gopi1410
  • 6,567
  • 9
  • 41
  • 75