如何定义我的 javascript 以显示我在 php 脚本中找到的图像

Question

首先我是这方面的新手，我感谢这里所有我认识的人。

我的问题：我创建了一个设置，您可以在其中以两种不同的方式上传文件夹 "test" 中的图片。我想在将图片从文件夹中取出的自动幻灯片中显示图片。（图片 1.jpg、2.jpg、3.jpg 在文件夹 TEST 中。）

我的 PHP 代码：

<?php
$dir_path = "test/";
$extensions_array = array('jpg','png','jpeg');
$phpArray = array();

$dateien=scandir($dir_path);
$anzahl=count($dateien);

    //echo "Anzahl $anzahl";


if(is_dir($dir_path))
{
$files = scandir($dir_path);

for($i = 0; $i < count($files); $i++)
{
if($files[$i] !='.' && $files[$i] !='..')
    {
        $file = pathinfo($files[$i]);
        $extension = $file['extension'];

        while(in_array($extension, $extensions_array))
        {
        // show image

        echo "<img src='$dir_path$files[$i]' style='width:500px;height:500px;'><br>";
           $phpArray []= array($dir_path, $files[$i]); 
           $filename[]= array($files[$i]);
            //echo $i;
            $i++;
        //echo "Anzahl $anzahl";

                if ($i>$anzahl) 
                    {break;}
            }
    }
}
}
$dir_path2 = "uplaods/";
$dateien2=scandir($dir_path);
$anzahl2=count($dateien2);

if ($anzahl2>$anzahl)

?>

使用 php 代码我得到了文件夹路径和文件名，我可以单独显示图片，但不能在幻灯片中显示：

我的HTML/JAVASCRIPT代码

<!DOCTYPE html>
<html>
<title>automatic slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Automatic Slideshow</h2>

<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="1.jpg" style="width:100%" >
<img class="mySlides" src="2.jpg" style="width:100%">
<img class="mySlides" src="3.jpg"style="width:100%">
</div>


<script>

var myIndex = 0;
carousel();

function carousel() {
var i;
 var x = document.getElementsByClassName("mySlides");  / HERE I NEED HELP
for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";  
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}    
x[myIndex-1].style.display = "block";  
setTimeout(carousel, 2000); // Change image every 2 seconds
}

</script>

</body>
</html>

幻灯片代码适用于我在 div 中定义的图像，但我想将其从文件夹中取出。我能够获得从 php 到 javascript 的文件名和文件夹路径，但我无法告诉 javascript 显示文件夹外的图片。

这可能吗？

Answer 1

您可以通过多种方式解决此问题，但 JavaScript 无法遍历文件系统目录中的文件（除非您使用的是服务器端 JavaScript）。一种选择是让您的 PHP 脚本将图像的 URI（相对或绝对）输出到 JavaScript 数组。另一种选择是让 PHP 脚本输出 JavaScript 在 HTML 头中，利用 URI 创建图像对象（这有利于预加载图像）并将对象放在 JavaScript数组。一个更复杂的解决方案是让你的 PHP 脚本到 return 图像 URI 的 JSON 数组，你可以使用 AJAX GET 从你的 JavaScript 中检索它请求。

Answer 2

PHP:

<?php
$dir_path = "test/";
//$dir_path2 = "uplaods/";
$extensions_array = array('jpg','png','jpeg');

if(is_dir($dir_path))
{
    $files = array_slice(scandir($dir_path), 2);
    foreach ($files as $file)
    {
        $ext = pathinfo($file);
        $ext = $ext['extension'];

        if(in_array($ext, $extensions_array))
            $images[] = '<img class="mySlides" src="'. $dir_path . $file .'" style="width:500px;height:500px;">';
    }
}
?>

HTML（在 PHP 文件内）：

<!DOCTYPE html>
<html>
<head>
 <title>automatic slideshow</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <style>
 .mySlides {display:none;}
 </style>
</head>
<body>

 <h2 class="w3-center">Automatic Slideshow</h2>
 <div class="w3-content w3-section" style="max-width:500px">
 <?php echo implode ("<br />", $images); ?>
 </div>


 <script>
  var myIndex = 0;
  carousel();

  function carousel() {
   var i;
   var x = document.getElementsByClassName("mySlides");  //HERE I NEED HELP
   for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
   }
   myIndex++;
   if (myIndex > x.length) {myIndex = 1}   
   x[myIndex-1].style.display = "block";  
   setTimeout(carousel, 2000); // Change image every 2 seconds
  }
 </script>
</body>
</html>

如何定义我的 javascript 以显示我在 php 脚本中找到的图像

How can I define my javascript to display the images I found in my php script

html

javascript

php

directory

slideshow