Javascript - Read Directory Contents

[Tricky]

I have a script written in PHP that uses OPENDIR() and READDIR() to obtain a list of filenames in a directory on my webserver.

Is there a similar function in JAVASCRIPT?

I have an existing javascript that shows images on the screen and then creates a zoom in function etc. I want to get the list of filenames into an array so that I can continue to use my existing code...

EDIT: Forget this, just remembered that Java runs client side!!! (Doh!)

[Graham M]

Javascript is client side, whereas PHP is server side, so what you have in mind won't work the way you seem to think it would if that makes sense.

Right so you have a file list, umm here's one way to go about adding the files into a list box of some sorts.

PHP Code:

<?php
/* Assuming the code has already been written to pass the filenames into an indexed array called $files */
 
print "<select name=\"filelist\" size=\"10\">";
for ($a = 0; a < count($files);a ++)
{
print "<option value=\"" . $files[$a] . "\">" . $files[$a] . "</option>";
}
print "</select>";
?>

Would or should print you a list of filenames from the array $files which you would then be able to access from Javascript.

[Tricky]

OK - If I have my list of files in a PHP Array "$aImages" can I access this from JavaScript? My script is below...

PHP Code:

echo("Reading Directory...");
$aImages = array();
$iNumber = 0;
$dirpath = "photos/".$vyear.$vmonth;
echo $dirpath;
$diraccess = opendir($dirpath);
while ( false != ($filename = readdir($diraccess)) )
{
if( ($filename != ".") and ($filename != "..") )
{
if( (substr($filename,0,2)=="st") )
{
$iNumber ++;
$aImages[iNumber] = substr($filename,3,12);
}
}
}
closedir($diraccess); 


[Graham M]

Originally Posted by Tricky

OK - If I have my list of files in a PHP Array "$aImages" can I access this from JavaScript? My script is below...

PHP Code:

echo("Reading Directory...");
$aImages = array();
$iNumber = 0;
$dirpath = "photos/".$vyear.$vmonth;
echo $dirpath;
$diraccess = opendir($dirpath);
while ( false != ($filename = readdir($diraccess)) )
{
if( ($filename != ".") and ($filename != "..") )
{
if( (substr($filename,0,2)=="st") )
{
$iNumber ++;
$aImages[iNumber] = substr($filename,3,12);
}
}
}
closedir($diraccess); 


OK if I get your meaning you will end up with an array called $aimages full of names of images, in that case it will work quite well using your chunk of code and then a slightly modified version of mine.

PHP Code:

echo("Reading Directory..."); 
$aImages = array(); 
$iNumber = 0; 
$dirpath = "photos/".$vyear.$vmonth; 
echo $dirpath; 
$diraccess = opendir($dirpath); 
while ( false != ($filename = readdir($diraccess)) ) 
{ 
if( ($filename != ".") and ($filename != "..") ) 
{ 
if( (substr($filename,0,2)=="st") ) 
{ 
$iNumber ++; 
$aImages[iNumber] = substr($filename,3,12); 
} 
} 
} 
closedir($diraccess); 
 
print "<select name=\"filelist\" size=\"10\">";
for ($a = 0; a < count($aImages);a ++)
{
print "<option value=\"" . $aImages[$a] . "\">" . $aImages[$a] . "</option>";
}
print "</select>"; 


Should work fine, then you'd just use the normal Javascript trickery to access the contents of the list box. Im not sure what you intend to do from this, maybe display the picture? That would be quite simple.

[Tricky]

The downside of this is I end up with a select box on my page (I've tried making the size 0 but this defaults back to 1 once data is present) - Is there any way of hiding this selection box/form in order that it's not displayed to the user?

Thanks for you help to date

[Graham M]

DUm de dum. Erm Im thinking you could probably put it in a separate frame like this:

<frameset rows="100%,*" frameborder=0>
<frame src="filewithjavascript.htm" name="javascript">
<frame src="filewithPHPandListBox.htm" name="phplistbox">
</frameset>

That way the frame containing the list box would not be shown but you could still get information from it by addressing it using Javascript from the Visible Frame. Its been a long time since Ive done this so it might not be quite correct. Understand what Im getting at?

[punky]

Why not just make a javascript array of your PHP one? Put this code in the page header (I have commented out your echos) like so:

PHP Code:

<?php

//echo("Reading Directory...");
$aImages = array();
$iNumber = 0;
$dirpath = "photos/".$vyear.$vmonth;
//echo $dirpath;
$diraccess = opendir($dirpath);
while ( false != ($filename = readdir($diraccess)) )
{
if( ($filename != ".") and ($filename != "..") )
{
if( (substr($filename,0,2)=="st") )
{
$iNumber ++;
$aImages[$iNumber] = substr($filename,3,12);
}
}
}
closedir($diraccess);

echo "<script language=\"javascript\">";

echo "var picarray = new Array(";

for ($i = 1;$i<count($aImages);$i++)
{

if ($i ==1)
{
echo "\"" . $aImages[$i] . "\"";
}
else
{
echo ",\"" . $aImages[$i] . "\"";
}
}

echo ");";

echo "</script>"; ?>

And that should define your php array as a javascript one. I noted a couple of mistakes though. You had "$aImages[iNumber]" when it should be "$aImages[$iNumber]", and also, you are starting the array at 1, not 0. Not a huge problem but not something you should do really. To access the array, see this example which can be put anywhere in the page:

<input type="button" value="test" onclick="javascript:alert(picarray[0]);">

HTH

[Tricky]

Originally Posted by punky

Why not just make a javascript array of your PHP one? Put this code in the page header (I have commented out your echos) like so:

And that should define your php array as a javascript one. I noted a couple of mistakes though. You had "$aImages[iNumber]" when it should be "$aImages[$iNumber]", and also, you are starting the array at 1, not 0. Not a huge problem but not something you should do really. To access the array, see this example which can be put anywhere in the page:

<input type="button" value="test" onclick="javascript:alert(picarray[0]);">

HTH

Excellent - This will be fine - Cheers Punky
The array starts at one because the 1st element which gets array_unshift() treated contains the number of elements in the array for use elsewhere when I don't have access to the PHP code to count() them

[DevlinTech]

Thank you for these bits of code as a clue to solving my same issue. I have used each of the examples previously posted and have tested them and am reposting the tested code for the next needy coder to use.

PHP Code:

<?php
//*****************************
//Find all files with specified suffix in the
//same directory as this web page and put them in
//a Javascript array for the Javascript slideshow.
//This script must go before the slideshow script.
//Reference: Javascript - Read Directory Contents
// in http://www.cableforum.co.uk

//Make changes here to match your paths and picture formats
//Change this to match your server
  $myWebPath = '/home/myWebDir/public_html';
//Case sensitive suffix your camera adds to the photo file.
  $myPicSuffix='JPG';

  $aImages = array(); 
  $iNumber = 0; 

$dirpath = dirname($_SERVER['PHP_SELF']);
echo $dirpath;//Let the user see what they need to
$dirpath = $myWebPath.$dirpath;//the server needs the whole path


$diraccess = opendir($dirpath); 
while ( false != ($filename = readdir($diraccess)) ) 
{ 
 if( ($filename != ".") and ($filename != "..") ) 
    { 
    if( (substr($filename,-3,3)==$myPicSuffix) ) 
        { 
        $aImages[$iNumber] = $filename; 
        $iNumber ++; 
        } 
    } 
} 
closedir($diraccess); 
 

//Make a javascript array named Pic and put the pictures into it
//because the etLux slideshow code expects that.
echo '<script language="javascript">'; 
echo 'var Pic = new Array('; 
for ($i = 0;$i<count($aImages);$i++) 
{ 
    if ($i ==0) //the first image
        { 
        echo '"' . $aImages[$i] . '"'; 
        } 
    else //all the rest of the images
        { 
        echo ',"' . $aImages[$i] . '"'; 
        } 
} 
echo ');';
echo '</script>';
//***********************************************
//***********************************************
?>

[Graham M]

That's a blast from the past, glad it helped

[caph]

Reading this thread reminds me of one good reason for using Asp.Net server controls. Granted you lose some control but boy were those reams of javascript a pain in the butt. I kid you not I wrote an old classic ASP page which contained about 2500 lines of javascript. It uses a crazy amount of DHTML and UI logic all specific to that single page. I recently knocked up an ASP.Net page which is almost as complicated overall (and more complicated in some respects) yet contains only a handful of javascript lines mainly to work around a couple of bugs in ASP.Net. How times change!

[Graham M]

ASP.net is all well and good but I'm not a big fan of closed technologies, and I enjoy working with PHP even if it does require some workarounds sometimes!

[caph]

Didn't mean to sound like I was knocking PHP, it was more the javascript I was talking about. I did some PHP4 a while back. Worked really well with MySQL. I found it very similar to classic ASP. I must say though that moving to a strongly typed early bound language has made a big difference to my development times.