从文件夹内容中读取单个img src到HTML

I am trying to write some simple code, but I am not sure what to use, javascript or PHP. I have some structured HTML docs and I want to insert an image from a folder into each img src attribute. So basically I would need to read in the contents and then insert each one, one by one.

<div class="slideshow">
        <div class="wrapper">
            <ul>
                <li>
                    <div class="main">
                        <a href="product1.html"><img src="images/sample/name1-1.jpg" alt="" width="630" height="400" /></a>
                    </div>
                    <div class="second">
                        <img src="images/sample/name1-2.jpg" alt="" width="310" height="190" />
                    </div>
                    <div class="third">
                        <img src="images/sample/name1-3.jpg" alt="" width="310" height="190" />
                    </div>
                </li>

Thanks to anyone who might be able to steer me in the right direction..

I am using the following code to get the images from the directory

<?php

Header("content-type: application/x-javascript");

function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; 
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ 

echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; 
returnimages() 
?>

but at this point I am not sure how to insert each file name into the src attribute

See here on how to upload image to floder using php here: http://www.w3schools.com/php/php_file_upload.asp

Then Once you are done uploading simply write an insert query to add to your table containing image details such as image name and product id associated with it

INSERT INTO images (id, image_name, product_id) VALUES ('myimage.jpg', '20'); 

I am assuming that you use auto increment for 'id' field, the primary key for images.

Then you just query the images table by product_id and get the image name then add to the scr field as

$imagename = 'myimage.jpg';

<img src="images/<?=$imagename;?>" />

You cannot read a directory on the server with JavaScript, so you must use PHP, and something like RecursiveDirectoryIterator (http://php.net/manual/en/class.recursivedirectoryiterator.php)

With PHP you could use the glob() function to get specific files from a directory.

For instance glob("path/to/images/*.jpg") would give you an array of the jpg images in your directory. Then you could use a foreach loop to print them all to a html page.