Question

Is is possible to use jquery to take something like an images directory, collecting the filenames, and then printing a list of links on a page?

For example.. An images directory like so:

• images/one.jpg
• images/two.jpg
• images/three.jpg

Then printing a index.html file like so:

• img src=”images/one.jpg”
• img src=”images/two.jpg”
• img src=”images/three.jpg”

Thanks

Answer 1

You would need to combine it with a serverside language to return the directory list. You can use JS to read from the filesystem directly. For example with php…

File: ls.php

<?php
  $dir = isset($_POST['dir']) ? $_SERVER['DOCUMENT_ROOT'].'/'.$_POST['dir'] : null;
  if(null !== $dir)
  {
     if($files = readdir($dir))
     {
        echo json_encode($files);
     }
  }
?>

in you js:

$.post(
  'ls.php', 
  {dir: 'images'}, 
  'JSON', 
  function(data){ 
    /* callback here the Data will be 
       an array of the files in dir */
  });

NOTE: dont use this code whole sale… you need to ad some security measures to the PHP portion, and i was to lazy to look up the argument order for $.post so you may need to modify that – but it should be enough to get the general idea 🙂