Javascript 我需要从本地文件夹中检索所有图像（无论编号和名称），并将它们显示在我的网站上

我见过许多类似的问题，但没有一个能以我理解的方式完全回答我的问题

我正在建立一个网站，我希望有一个指定的文件夹，从中检索所有图像（这些图像可能每天都在变化，因此我不能基于文件名，而是基于该文件夹的文件路径），并在页面上显示它们。到目前为止，我已经看到了许多使用PHP、Javascript、Ajax等进行类似操作的示例。。。。很多

然而，我仍然无法将这些示例或其他人的想法实现到我自己的代码中。下面是我一直在努力工作的几段代码；我从各种各样的例子中提取了这些内容，并试图根据自己的需要对其进行定制，但一直无法在我的浏览器（Google Chrome）中显示有效的HTML

以下是我的PHP脚本：

<?
    //PHP SCRIPT: getimages.php
     Header("content-type: application/x-javascript");

    //This function gets the file names of all images in the current directory
    //and outputs them as a JavaScript array
    function returnimages($dirname=".") {
        $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image 
        extensions
        $files = array();
        $curimage=0;
        if($handle = opendir($dirname)) {
            while(false !== ($file = readdir($handle))){
                if(eregi($pattern, $file)){ //if this file is a valid image
                    //Output it as a JavaScript array element
                     echo 'galleryarray['.$curimage.']="'.$file .'";';
                    $curimage++;
                }
            }

            closedir($handle);
        }
        for(int i = 0; i < 5; i++)
        {
            printf($files(i))
        }
        return($files);
    }

    echo 'var galleryarray=new Array();'; //Define array in JavaScript
    returnimages() //Output the array elements containing the image file names
    ?>

这是我的HTML文件：

<script src="http://www.javascriptkit.com/javatutors/phpslide.images.php"</script>
<script type="text/javascript">
 
var curimg=0
function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", "phpslide/"+galleryarray[curimg])
    curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}
 
window.onload=function(){
    setInterval("rotateimages()", 2500)
}
</script>
 
<div style="width: 170px; height: 160px">
<img id="slideshow" src="pics/bear.gif"/>
</div>

---

基本思想是坚实的，只是执行过程中有一些细节需要清理。我在本地设置了这个，并对它进行了一些清理

PHP:

从文件夹中检索所有图像很容易。但也许你应该解释一下你要用它们做什么？我的意思是，我可以告诉您使用来获取目录中所有文件的列表，并通过数组循环显示它们。但在我看来，你在做一个图像滑块？这听起来和我想做的非常准确。基本上，在这个网站上，企业主会将图像放在代码从中提取的文件夹中。无论有什么图像，代码都需要看到它们。然后，图像（全部）将显示在与文件夹中放置的图片类型对应的页面上（每个页面都有单独的文件夹）。假设在FolderX中有IMG1、IMG2和IMG3，在FolderY中有IMG4、IMG5和IMG6。我需要PageX显示IMG1、IMG2和IMG3，PageY显示4-6。。如果我用IMG7替换IMG2，我需要反映出来。哇！正如你所看到的，我完全只是从一个网站上复制了这个脚本，试图让它正常工作。一旦我掌握了基本知识，我就可以稍微操纵它了。请原谅这个愚蠢的问题，但是你的galleryPath和imagePath有什么区别？我将有X号图片在一个文件夹中，我必须拉所有这些图片显示在页面上。我避免硬编码图像名称，因为图像将在不同时间被删除和替换。$imagePath是returnImages函数应该查找的目录路径。Gallery path是客户端脚本在文件名前添加的URL，用于创建图像的完整路径。因此，如果脚本位于/gallery/中，而图像位于/gallery/images中，$imagePath将是“images”，而$galleryPath将是“/gallery/images/”。或者，如果您的客户不是来自同一站点，则$gallery path将为“”。如果您确实希望所有图像都没有限制，只需使用array_slice注释我们的行。因此，如果我理解正确，那么，您的代码当前所说的$dirPath实际上应该是$galleryPath。对的或者，$dirPath是一个完全不同的变量，我刚才在这里完全忽略了它吗？不，$galleryPath只进入客户端，它是图像的基本URL$imagePath是服务器上图像所在目录相对于PHP文件的路径$dirPath是returnImages函数中的局部变量。如果这让您感到困惑，您可以将$imagePath变量的名称更改为$dirPath以保持一致。只要正确设置这两个变量，我发布的代码就可以正常运行。我对这些文件路径引用的理解似乎有缺陷。我的PHP脚本和HTML文件都位于C:\inetpub\wwwroot中（我将IIS用于本地主机服务器）。在浏览器中运行HTML文件时，出现404未找到错误。它似乎找不到PHP脚本，我在HTML中引用了它。我还在rotateImages函数中得到一个错误，“galleryPath未定义”。我怀疑这是因为它找不到PHP脚本。我试图自学网络开发，所以这对我的理解有很大帮助。非常感谢。
<?php
/**
 * This PHP script returns javascript that feeds an image gallery. A JSON array of images are returned along with a
 * parameter that indicated the base URL for the images.
 *
 */

/**
 * @var $localImageDir string
 * The path to the local image directory relative to this script
 */
$localImageDir = 'img';

/**
 * @var $baseUrl string
 * The URL path to the image directory
 */
$baseUrl = 'http://localhost/img/';

/**
 * This function returns an array of image file names in the specified directory. The output is limited
 * using the limit parameter
 *
 * @param string $localImageDir
 * @param string $baseUrl
 * @param int $limit
 * @return array
 */
function returnImages($localImageDir = '.', $baseUrl='', $limit = 5)
{
    //valid image extensions
    $pattern = "/(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)/";

    $files = array();
    if ($handle = opendir($localImageDir))
    {
        while (false !== ($file = readdir($handle)))
        {
            //Use preg_match here, eregi is deprecated
            if (preg_match($pattern, $file))
            {
                $files[] = $baseUrl.$file;
            }
        }

        closedir($handle);
    }

    // Limit results
    $output = array_slice($files, 0, $limit);

    return $output;
}

// Get the image list as an array
$imageArray = returnImages($localImageDir, $baseUrl);

//Encode the image array as JSON
$json = json_encode($imageArray);

//Set the appropriate HTTP header and echo the JavaScript
Header("content-type: application/x-javascript");
echo 'var galleryImages=' . $json.';';

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="images.php"></script>
    <script type="text/javascript">
        var curImg=0;
        function rotateImages()
        {
            document.getElementById("slideshow").setAttribute("src", galleryImages[curImg]);
            curImg=(curImg<galleryImages.length-1)? curImg+1 : 0;
        }

        window.onload=function()
        {
            setInterval("rotateImages()", 2500)
        }
    </script>
</head>
<body>
<div style="width: 170px; height: 160px">
    <img id="slideshow" src="pics/bear.gif"/>
</div>
</body>
</html>