Detecting files in a folder with PHP - php

Question

I am trying to make an HTML5 slideshow system that implements PHP. My idea begins with making a system that detects the images in a folder, and puts them in an array, which the jquery will then be able to access for implementation in the slideshow. Firstly I have a php file that will detect the names of every file in the folder, and output them as plain text.
How, instead of outputting as plain text, can i make the PHP transfer the file names to a numerical array, which can be used with the jquery that will then accompany it?
I intend to use jquery to access the numerical array that is then made. How is this done? Unless it is not possible to do, and so how else can it be done?
The goal is to be able to put files in a folder, and for the scripting to dynamically recognize the presence of files, and incorporate them in a slideshow. This slideshow will then be output to a screen display which will be used in a waiting area, showcasing our school with a slideshow of images about the school.
Here is the code that I have so far:
<?php
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
echo "filename: " . $file . "<br />";
}
closedir($dir);
?>
At this point I do not know how to make PHP "talk" with Javascript. I hope that there is some simple method for this, what I think I'm going for is AJAX, but I have no idea how this works.

Answer 1

The answer here is to use JSON, a subset of Javascript supported by many languages that allows you to (amongst many other things) very easily pass structured data into Javascript from external sources. PHP has a function json_encode() which allows you convert PHP data structures - usually arrays or objects - into a format the Javascript can easily read. jQuery also has built-in support for JSON.
<?php
// An array of the image file names
$images = array();
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
$images[] = $file;
}
closedir($dir);
echo json_encode($images);
?>
Now, in jQuery you can do this:
$.getJSON('http://url/of/your/script.php', function(images) {
// In here the variable "images" is an array identical to the one you constructed with PHP
});

Answer 2

Yes you can use ajax to fetch the image filenames as an array by changing you php code like follows
<?php
//Open images directory
$dir = opendir("images");
$images = array();
//List files in images directory
while (($file = readdir($dir)) !== false)
{
//echo "filename: " . $file . "<br />";
$images[] = $files;
}
closedir($dir);
echo json_encode($images);
?>
then use $.getJSON o fetch that list
$.getJSON('path_to_above_php_file', function(images) {
//all your files are in images array, you can loop through it to find individual files
});

Answer 3

You could have an array with all your pictures then convert this array to JSON.

Answer 4

There are a few ways to do this, a quick and easy way is to do:
your php:
$dir = opendir("images");
$store = array();
while (($file = readdir($dir)) !== false)
{
$store[] = $file;
}
closedir($dir);
Now you have an array of all files (i might add that you may want to validate the file is an image!). I like to just dump them into JS as a json string as it saves me messing around. so:
echo "<script> var allimages = jQuery.parseJSON('".addslashes(json_encode($store))."'); </script>";
Now if you console.log() the allimages variable you will see you have all your images within that so you can use "$.each" or similar if you wish.

Answer 5

Rather than simply storing the name of the images, why not write the images themselves to your document? So something like:
<?php
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
$files[] = YOUR_URL_PATH.$file;
}
closedir($dir);
?>
...
<div id="slideshow">
<?php
foreach($files as $img)
echo '<img class="slide" src="'.$img.'" />';
?>
</div>
...
<script type="text/javascript">
$(document).ready(function()
{
alert($(".slide").length+" slides detected");
});
</script>
That way, instead of relying on PHP to define your jQuery, you're using PHP to define the elements jQuery needs in order to function properly.
UPDATE:
If your PHP and Javascript exist on the same page, and you still want to be able to set a Javascript array using PHP, then I think this is what you're looking for:
<?php
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
$files[] = YOUR_URL_PATH.$file;
}
closedir($dir);
?>
...
<script type="text/javascript">
$(document).ready(function()
{
var fileArr = [<?php echo implode(',',$files); ?>];
});
</script>
This requires that your Javascript resides on the same page as your PHP that defines the file array. If your Javascript is intended to be referenced externally, then your best bet is to use JSON array as mentioned by many of the other answers here.

Answer 6

I would say JSON suits your situation well. Just create PHP file that prints (echo) the JSON object containing the list of your files. You can use json_encode() to create the JSON object. On your browser side you can make an AJAX request (or simply use jQuery.getJSON()) and set the data type to JSON and you should be good to go:
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
Here you can read about using JSON in PHP.

Answer 7

SPL library has function to handler directories
From PHP site:
Usage example:
To see all the files:
<?php
$ite=new RecursiveDirectoryIterator($_POST['path']);
$files = array();
foreach (new RecursiveIteratorIterator($ite) as $filename=>$cur) {
array_push($files, $filename);
}
echo json_encode($files);
?>
Now with jquery.post() you can retrieve the list of files in folder.